/* Auto-extracted from public/profil.html (inline styles) */

/* ====== Basis & Variablen ====== */
:root{
  --ui-radius: 10px;
  --ui-border: #ccc;
  --ui-bg: var(--app-surface-bg-muted);
  --ui-fg: var(--app-shell-text);
  --ui-focus: var(--app-color-primary, #365945);
  --ui-focus-ring: rgba(var(--app-color-primary-rgb, 54, 89, 69), .14);
  --ui-focus-ring-strong: rgba(var(--app-color-primary-rgb, 54, 89, 69), .45);
  --ui-accent-soft: var(--app-color-sage-soft, rgba(var(--app-color-sage-rgb, 149, 174, 160), 0.16));
  --ui-placeholder: #9aa0a6;

  --ctrl-h: 44px;
  --geo-width: 360px;

  /* Topbar / Buttons */
  --tb-green: var(--app-color-primary, #365945);
  --tb-green-hover: var(--app-color-primary-hover, #2d4a39);
  --tb-green-active: var(--app-color-primary-active, #244130);
  --topbar-max-width: 700px;
  --topbar-padding-x: 20px;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --tooltip-offset: 1rem;
}
  
html, body{
  margin:0; padding:0; height:100%;
  background:var(--app-shell-bg, #f4f6f8);
  font-family: var(--font-family-base); color:var(--ui-fg);
  overflow-y:auto; overflow-x:hidden;
  box-sizing:border-box;
}
/* Header/Topbar soll früh sichtbar sein – nur den Hauptinhalt kurz ausblenden */
html.profile-loading body{
  visibility:visible;
}
  
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
html.profile-loading main{
  opacity:0;
}
body{ display:flex; flex-direction:column; align-items:center; }
  
/* ====== Layout-Container (exakt 700 px) ====== */
main{
  width:100%;
  transition:opacity .2s ease;
}
.profile-header,
.section,
.save-area{ width:700px; max-width:700px; margin:0 auto; box-sizing:border-box; }
  
/* Profilkopf (Avatar + Name) */
.profile-header{ text-align:center; padding-top:16px; }
#avatarPreviewWrapper{
  width:120px; height:120px; margin:22px auto 0;
  border-radius:50%; border:4px solid #fff; box-shadow:0 0 0 2px var(--tb-green);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
/* statt display:none – keeps it actionable for input.click() */
#avatarInput{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#avatarPreview{ width:100%; height:100%; object-fit:cover; border-radius:50%; transition:transform .2s ease; }
#avatarPreviewWrapper:hover #avatarPreview{ transform:scale(1.04); }
  
#coach_name_display {
  font-weight: 600;
  font-size: 1.8rem;
  text-align: center;
  padding: 6px 12px;
  outline: none;
  display: block;
  max-width: 420px;
  box-sizing: border-box;
}

#coach_name_display{
  border:1px solid transparent;
  border-radius:12px;
  transition:border-color .16s ease;
}
#coach_name_display:hover,
#coach_name_display:focus,
#coach_name_display:focus-visible,
#coach_name_display[data-visible="true"] {
  border-color:var(--ui-focus);
  background:#fff;
}

/* Avatar weich einblenden; ohne data-ready bleibt er versteckt (vermeidet iOS-Flicker) */
img[data-avatar="true"] { opacity: 0; transition: opacity .2s ease; visibility: hidden; }
img[data-avatar="true"][data-ready="true"] { opacity: 1; visibility: visible; }

/* Profil-Vorschau: lokales Avatar-Preview hat ggf. kein data-ready. */
#profilePreviewBackdrop img[data-avatar="true"] { opacity: 1; visibility: visible; }

/* Profil-Vorschau: neues Einseiten-Overlay mit visueller Termin-CTA. */
#profilePreviewBackdrop #coachOverlayFront .overlay-body {
  padding-bottom: clamp(4.2rem, 8vh, 4.8rem);
}

#profilePreviewBackdrop .overlay-action-footer {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.2rem;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.72rem 0 0;
  background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0.72) 48%, #fff 100%);
  pointer-events: none;
}

#profilePreviewBackdrop .profile-preview-action-button {
  width: min(100%, 360px);
  min-height: 50px;
  border: 1px solid var(--app-color-primary, #365945);
  border-radius: 8px;
  background: var(--app-color-primary, #365945);
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.14);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 500px) {
  #profilePreviewBackdrop .overlay-action-footer {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
  }
}
  
/* ====== Karten / Form ====== */
.section{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--app-surface-bg, #fff);
  padding:var(--space-4) var(--space-3);
  border-radius:12px;
  margin:var(--space-2) auto var(--space-4);
  border:1px solid var(--app-surface-border, rgba(148, 163, 184, 0.18));
  box-shadow:var(--app-surface-shadow, 0 6px 16px rgba(15, 23, 42, 0.05));
}
  
input[type="text"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea{
  width:100%; box-sizing:border-box;
  font: 1rem var(--font-family-base); color:var(--ui-fg);
  background:var(--ui-bg); border:1px solid var(--ui-border); border-radius:var(--ui-radius);
  padding:12px; margin:0; height:var(--ctrl-h);
  transition:border-color .15s ease, background .15s ease;
}

input:-webkit-autofill,
input:-webkit-autofill:hover{
  box-shadow:0 0 0 1000px var(--ui-bg) inset;
  -webkit-box-shadow:0 0 0 1000px var(--ui-bg) inset;
  -webkit-text-fill-color:var(--ui-fg);
}

input:-webkit-autofill:focus{
  box-shadow:0 0 0 1000px #fff inset;
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ui-fg);
}
.field-control-shell{
  width:100%;
  height:var(--ctrl-h);
  display:flex;
  align-items:center;
  box-sizing:border-box;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:var(--ui-bg);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  padding:0;
  overflow:hidden;
}
.field-control-shell.tooltip-highlight{
  border-color:var(--ui-focus);
  box-shadow:0 0 0 1px rgba(var(--app-color-primary-rgb, 54, 89, 69), .18);
}
.field-control-shell select{
  width:100%;
  height:100%;
  flex:1 1 auto;
  box-sizing:border-box;
  border:0;
  background:transparent;
  padding:0 12px;
  font: 1rem var(--font-family-base);
  color:var(--ui-fg);
  appearance:auto;
}
.field-control-shell:focus-within{
  border-color:var(--ui-focus);
  background:#fff;
}
textarea{ min-height:90px; max-height:180px; height:auto; resize:vertical; }
#coach_profile_text{
  min-height: initial;
  max-height: none;
  height: auto;
  resize: none;
}
input::placeholder,textarea::placeholder{ color:var(--ui-placeholder); }
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--ui-focus);
  background:#fff;
  box-shadow:none;
}
input[type="number"]{-moz-appearance:textfield; appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
label{ font-weight: 600; display:block; text-align:left; transition:color .16s ease; }

.location-input-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-width:0;
  width:100%;
  min-height:var(--ctrl-h);
  padding:3px 5px 3px 8px;
  box-sizing:border-box;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.location-input-shell:focus-within{
  border-color:var(--ui-focus);
  background:#fff;
}
.location-input-shell .field-input{
  width:100%;
  min-width:0;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  outline:none;
  font:inherit;
  color:#000;
  background:transparent;
  box-shadow:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.location-input-shell .field-input::placeholder{
  text-overflow:ellipsis;
}
.location-input-shell .field-input:focus{
  border:0;
  background:transparent;
  box-shadow:none;
}
.profile-location-apply-btn{
  width:auto !important;
  max-inline-size:110px;
  height:1.6rem;
  padding:0 10px;
  border:0;
  border-radius:4px;
  background:var(--tb-green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  white-space:nowrap;
  cursor:pointer;
}
.profile-location-apply-btn:disabled{
  opacity:.5;
  cursor:default;
}
.profile-location-apply-btn .btn-txt{
  display:inline;
}

.field-block{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}
.field-block > .field-label{
  align-self:flex-start;
  width:fit-content;
}
.field-block textarea{ margin:0; }
.with-tooltip{ position:relative; }
.field-label{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  margin-bottom:0;
}
.field-label label{
  margin:0;
  cursor:default;
  display:inline-block;
  font-weight:600;
  
}
.field-label.field-heading{ margin-top:0; }
.tooltip-label{ font-weight:600; display:block; transition:color .16s ease; }
.tooltip-info-toggle{
  display:none;
  margin-left:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .35);
  background:#fff;
  color:var(--tb-green);
  font-weight:600;
  font-size:.85rem;
  line-height:1;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tooltip-info-toggle span{ pointer-events:none; }
.tooltip-info-toggle[data-visible="true"]{
  background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .12);
  border-color:var(--tb-green);
}
.tooltip-info-toggle:focus-visible{
  outline:2px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .45);
  outline-offset:2px;
}
.with-tooltip[data-visible="true"] > label,
.with-tooltip[data-visible="true"] > .tooltip-label,
.with-tooltip [data-tooltip-trigger][data-visible="true"]:not(#coach_name_display){
  color:var(--tb-green);
}
#coach_name_display[data-visible="true"] {
  color:inherit;
}
.tooltip-highlight{
  border-color:var(--ui-focus) !important;
  box-shadow:0 0 0 1px rgba(var(--app-color-primary-rgb, 54, 89, 69), .18) !important;
}
.tooltip-highlight.money-field{
  border-color:var(--ui-focus);
  box-shadow:0 0 0 1px rgba(var(--app-color-primary-rgb, 54, 89, 69), .18);
}
.tooltip-highlight__inner{
  border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .12) !important;
  box-shadow:none !important;
}
.kpi-grid.tooltip-highlight{
  box-shadow:none !important;
}
.kpi-grid.tooltip-highlight .kpi-box{
  border-color:var(--ui-focus);
  box-shadow:0 0 0 1px rgba(var(--app-color-primary-rgb, 54, 89, 69), .18);
}
.info-tooltip{
  position:absolute;
  top:50%;
  left:calc(100% + var(--tooltip-offset));
  min-width:220px;
  max-width:280px;
  padding:12px 14px;
  border-radius:12px;
  background:#f7f9f8;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .35);
  box-shadow:none;
  font-size:.92rem;
  line-height:1.35;
  color:var(--ui-fg);
  opacity:0;
  visibility:hidden;
  transform:var(--tooltip-hidden-transform, translate(-8px, -50%));
  transition:opacity .16s ease, transform .16s ease;
  z-index:4000;
  cursor:default;
  pointer-events:none;
}
.info-tooltip p{
  margin:0 0 8px;
}
.info-tooltip ul{
  margin:0;
  padding-left:1.2em;
}
.info-tooltip li{
  margin:0 0 6px;
}
.info-tooltip li:last-child{
  margin-bottom:0;
}
.info-tooltip[data-visible="true"]{
  opacity:1;
  visibility:visible;
  transform:var(--tooltip-open-transform, translate(0, -50%));
}
#tooltip-tax-status{
  max-width:360px;
}
.profile-name-wrapper{
  display:flex;
  justify-content:center;
  margin:12px auto 0;
  width:fit-content;
}
.profile-name-wrapper .info-tooltip{
  text-align:left;
  max-width:280px;
}
@media (max-width:880px){
  .profile-name-wrapper .info-tooltip{
    top:calc(100% + 16px);
    left:50%;
    --tooltip-hidden-transform: translate(-50%, -8px);
    --tooltip-open-transform: translate(-50%, 0);
    text-align:center;
  }
}
@media (max-width:720px){
  .info-tooltip{ max-width:calc(100vw - 60px); }
  .field-label{ align-items:center; }
  .profile-heading{ align-items:center; }
}
@media (hover: none) and (pointer: coarse){
  .tooltip-info-toggle{ display:inline-flex; }
}
@media (hover: hover) and (pointer: fine){
  .tooltip-info-toggle{ display:none !important; }
}

.profile-heading{
  margin:16px auto 0;
  display:flex;
  justify-content:center;
  width:auto;
}
.profile-heading label,
.profile-heading .tooltip-label{
  text-align:center;
}
.avatar-label{ cursor:pointer; }
.details-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--space-4); align-items:start; }
.details-left,
.details-right{ display:flex; flex-direction:column; gap:var(--space-3); }
.details-row > *{ min-width:0; }

.certification-block .field-heading{ margin:0; }
.certification-grid{
  --cert-upload-size: 144px;
  --cert-toolbar-h: 32px;
  --cert-viewport-h: 94px;
  --cert-shell-gap: 6px;
  --cert-shell-pad-y: 8px;
  --cert-shell-pad-x: 10px;
  --cert-shell-border: 1px;
  --cert-shell-h: calc(
    var(--cert-toolbar-h)
    + var(--cert-viewport-h)
    + var(--cert-shell-gap)
    + var(--cert-shell-pad-y)
    + var(--cert-shell-pad-y)
    + var(--cert-shell-border)
    + var(--cert-shell-border)
  );
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--cert-upload-size);
  gap:var(--space-2);
  align-items:start;
}
.certification-select__shell{
  padding:var(--cert-shell-pad-y) var(--cert-shell-pad-x);
  display:grid;
  grid-template-rows:var(--cert-toolbar-h) var(--cert-viewport-h);
  row-gap:var(--cert-shell-gap);
  align-content:start;
  border:var(--cert-shell-border) solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:var(--ui-bg);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
  box-sizing:border-box;
  height:var(--cert-shell-h);
}
.certification-select__shell [hidden]{ display:none !important; }
.certification-toolbar{ min-width:0; }
.certification-toolbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  height:100%;
}
#coach_certification_toolbar_picker{ gap:8px; }
.certification-select__title{
  font-weight:600;
  font-size:.95rem;
}
.certification-select__add{
  flex:0 0 auto;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .25);
  background:#fff;
  color:var(--ui-focus);
  border-radius:var(--app-inline-control-radius);
  padding:var(--app-inline-control-pad-y) var(--app-inline-control-pad-x);
  height:100%;
  box-sizing:border-box;
  font:500 var(--app-inline-control-font) var(--font-family-base);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.certification-select__add:hover{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:0 4px 14px rgba(15,23,42,.09); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .05); }
.certification-select__add:active{ background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .09); }

.certification-viewport{
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}
.certification-active{
  display:flex;
  flex-direction:column;
  gap:3px;
  height:100%;
  overflow:auto;
  scrollbar-gutter:stable;
}
.certification-empty{
  margin:0;
  padding:6px 2px;
  color:#5f6b63;
  font-size:.92rem;
}
.certification-chip{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 12px;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .16);
  background:#fff;
}
.certification-chip__text{
  display:block;
  flex:1;
  min-width:0;
  font-weight:400;
  letter-spacing:.01em;
  font-size:.95rem;
  white-space:normal;
  overflow-wrap:anywhere;
}
.certification-chip.is-long .certification-chip__text,
.certification-item.is-long .certification-item__label{
  font-size:.85rem;
}
.certification-chip.is-very-long .certification-chip__text,
.certification-item.is-very-long .certification-item__label{
  font-size:.8rem;
}
@media (max-width:720px){
  .certification-chip.is-long .certification-chip__text,
  .certification-item.is-long .certification-item__label,
  .certification-chip.is-very-long .certification-chip__text,
  .certification-item.is-very-long .certification-item__label{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal;
  }
}
.certification-chip__remove{
  box-sizing:border-box;
  flex:0 0 auto;
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:#5f6b63;
  cursor:pointer;
  line-height:1;
  font-weight:400;
  font-size:1.05rem;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.certification-chip__remove:hover{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:none; background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .1); }
.certification-chip__remove:active{ background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .14); }
.certification-chip__remove:focus-visible{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:none; background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .1); outline:none; }

.certification-picker{
  height:100%;
}
.certification-search{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:stretch;
  font-weight:400;
}
.certification-search input{
  width:100%;
  height:100%;
  padding:6px 10px;
  font-size:.85rem;
}
.certification-picker__close{
  flex:0 0 auto;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .25);
  background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .06);
  color:var(--ui-focus);
  border-radius:var(--app-inline-control-radius);
  padding:var(--app-inline-control-pad-y) var(--app-inline-control-pad-x);
  height:100%;
  box-sizing:border-box;
  font:500 var(--app-inline-control-font) var(--font-family-base);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.certification-picker__close:hover{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:0 4px 14px rgba(15,23,42,.09); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .1); }
.certification-picker__close:active{ background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .14); }

.certification-picker__list{
  display:flex;
  flex-direction:column;
  gap:3px;
  height:100%;
  overflow:auto;
  scrollbar-gutter:stable;
}
.certification-item{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:6px 12px;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .16);
  background:#fff;
  cursor:pointer;
  text-align:left;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.certification-item:hover{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:0 4px 14px rgba(15,23,42,.09); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .05); }
.certification-item:active{ background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .09); }
.certification-item[disabled],
.certification-item.is-disabled{
  cursor:not-allowed;
  border-color:rgba(15,23,42,.08);
  background:rgba(15,23,42,.02);
  box-shadow:none;
  opacity:.72;
}
.certification-item__label{
  flex:1;
  min-width:0;
  font-weight:400;
  letter-spacing:.01em;
  font-size:.95rem;
  white-space:normal;
  overflow-wrap:anywhere;
}
.certification-item__meta{
  flex:0 0 auto;
  font-size:.85rem;
  color:#5f6b63;
}
.certification-option{ display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:10px; border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .16); background:#fff; cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; min-height:30px; }
.certification-option:hover{ border-color:rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); box-shadow:0 4px 14px rgba(15,23,42,.09); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .05); }
.certification-option input{ appearance:none; width:16px; height:16px; margin:0; border:2px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .4); border-radius:5px; display:grid; place-items:center; background:#fff; transition:border-color .16s ease, background-color .16s ease; }
.certification-option input::after{ content:''; width:8px; height:8px; border-radius:2px; background:var(--tb-green); transform:scale(0); transition:transform .18s ease; }
.certification-option input:checked{ border-color:var(--tb-green); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .12); }
.certification-option input:checked::after{ transform:scale(1); }
.certification-option input:focus-visible{ outline:2px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), .45); outline-offset:2px; }
.certification-option span{ flex:1; font-weight:600; letter-spacing:.01em; font-size:.95rem; }
.certification-option input:checked + span{ color:#1f3a2a; }
.certification-upload{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:var(--space-1);
  padding:8px 12px;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:var(--ui-bg);
  box-sizing:border-box;
  width:100%;
  height:var(--cert-shell-h);
  overflow:hidden;
  align-self:start;
}
.certification-upload__title{ font-weight:600; font-size:.95rem; }
.certification-upload__note{ margin:0; font-size:.82rem; color:#5f6b63; }
.certification-upload__pill{ display:inline-flex; align-items:center; gap:6px; padding:var(--app-inline-control-pad-y) var(--app-inline-control-pad-x); border-radius:var(--app-inline-control-radius); background:rgba(var(--app-color-primary-rgb, 54, 89, 69), .12); color:var(--ui-focus); font:500 var(--app-inline-control-font) var(--font-family-base); cursor:not-allowed; opacity:.8; }
.certification-upload__pill::before{ content:'↑'; font-size:.85rem; }
@media (max-width:720px){
		  .certification-grid{ grid-template-columns:1fr; gap:var(--space-2); }
		  .certification-upload{ padding:12px; min-height:auto; height:auto; }
		}
.field{ display:grid; grid-template-rows:auto var(--ctrl-h); row-gap:var(--space-1); margin: 0;}
.field input,
.field textarea,
.field-control-shell{ margin:0; height:var(--ctrl-h); }
.field > .field-label{ justify-self:start; width:fit-content; }

/* Abstand nur zwischen aufeinanderfolgenden .field-Elementen */
.hourly-grid{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  align-items:flex-end;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  justify-content:start;
}
.hourly-grid .field{ min-width:0; }
.field-hourly .field-tax-status{
  min-width:0;
  width:min(100%, 20rem);
  justify-self:start;
}
.money-field{
  display: flex;
align-items: center;
/* gap: .5rem; */
height: var(--ctrl-h);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius);
background: var(--ui-bg);
padding-right: 8px;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding-left: 8px;
}
.money-field:focus-within{ border-color:var(--ui-focus); background:#fff; }
#coach_hourly_rate_net{
  width: 6ch;
border: 0;
outline: 0;
background: transparent;
font: inherit;
height: 100%;
padding: 0;
text-align: center;
line-height: 1;
}
.money-field--readonly{ cursor:default; color:#5f6b63; }
.money-field--readonly[data-empty="true"] .suffix{ display:none; }
.money-output{
  width: 9ch;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  height: 100%;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  line-height: 1;
}
.money-field .suffix{ display:flex; align-items:center; line-height:1; user-select:none; }
.field-control-shell--tax-status{
  min-width:0;
  width:100%;
}
  
.map-wrapper{ display:flex; align-items:center; margin-top: var(--space-2); width:100%; }
#map{ width: min(100%, var(--geo-width)); aspect-ratio:4/1; border-radius:12px; border:1px solid #ccc; }
  
.kpi-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  width:100%;
}
.kpi-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:12px 14px;
  flex:1 1 0;
  min-width:200px;
  background: var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:18px;
  box-sizing:border-box;
}
.kpi-label{
	  font-size:.9rem;
	  font-weight:400;
	  line-height:1.3;
	}
.kpi-value{
	  font-size:1.35rem;
	  font-weight:600;
	}

/* KPI-Bereich nicht auf Control-Höhe begrenzen */
.field-success{
	  grid-template-rows:auto auto;
	  margin-top: 0;
}
.field-success .kpi-grid{
  margin-top: 0;
}


/* ====== Sicherheit ====== */
.security-section{ display:flex; flex-direction:column; gap:var(--space-2); }
.security-grid{ display:grid; gap:var(--space-2); grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.security-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:12px;
  padding:var(--space-3);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.security-card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-1);
}
.security-card h3{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  color:#2f2f2f;
}
.security-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  padding:0.25rem 0.65rem;
  background:#f5f5f5;
  color:#555;
  border-radius:999px;
  font-weight:600;
}
.security-pill[data-state="active"]{ background:var(--ui-accent-soft); color:var(--tb-green); }
.security-pill[data-state="inactive"]{ background:#f3f4f6; color:#4b5563; }
.security-pill--warning{ background:rgba(var(--app-color-sage-rgb, 149, 174, 160), .24); color:var(--app-color-reserved, #595436); }
.security-actions{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
.security-actions > *{ flex:0 0 auto; }
.security-status{
  margin:0;
  font-size:.9rem;
  min-height:1.2em;
}
.security-status[data-state="success"]{ color:var(--tb-green); }
.security-status[data-state="error"]{ color:var(--app-banner-error, #593936); }
.security-status[data-state="pending"]{ color:var(--app-color-reserved, #595436); }
.mfa-enrollment{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  border:1px dashed #d9d9d9;
  border-radius:10px;
  padding:var(--space-2);
  background:#fafafa;
}
.mfa-enrollment[hidden]{ display:none; }
.mfa-enrollment img{
  max-width:220px;
  width:100%;
  background:#fff;
  border-radius:8px;
  padding:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.mfa-secret-key{
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #e5e5e5;
  background:#fff;
  font-family:'SFMono-Regular','Consolas','Liberation Mono',monospace;
  font-size:.95rem;
  letter-spacing:.12em;
}
.mfa-confirm-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
#mfaOtpInput{
  width:9ch;
  text-align:center;
  letter-spacing:0.35ch;
  font-variant-numeric:tabular-nums;
}

@media (max-width:720px){
  .security-grid{ grid-template-columns:100%; }
}

/* ====== Save Area ====== */
.save-area{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); margin:var(--space-3) auto var(--space-4); }
.save-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
#profilePreviewBtn{
  background:transparent;
  color:var(--tb-green);
  border:1px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.25);
  border-radius:var(--app-form-action-radius);
  font-size:var(--app-form-action-font);
  font-weight:400;
  padding:var(--app-form-action-pad-y) var(--app-form-action-pad-x);
  min-width:25%;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
#profilePreviewBtn:hover{ background: rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.08); border-color: rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.32); }
#profilePreviewBtn:active{ background: rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.12); }
#profilePreviewBtn:focus-visible{
  outline: 2px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.35);
  outline-offset: 2px;
}
#profilePreviewBtn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
#saveBtn{
  background:var(--tb-green); color:#fff; border:0; border-radius:var(--app-form-action-radius);
  font-size:var(--app-form-action-font); font-weight: 400;
  padding:var(--app-form-action-pad-y) var(--app-form-action-pad-x);
  min-width:25%;
  cursor:pointer; transition:background-color .2s ease;
}
#saveBtn:hover{ background-color: var(--tb-green-hover); }
#saveBtn:active{ background-color: var(--tb-green-active); }
#saveBtn:focus-visible{
  background-color: var(--tb-green-hover);
  outline: 2px solid rgba(var(--app-color-primary-rgb, 54, 89, 69), 0.35);
  outline-offset: 2px;
}
#saveStatus{ text-align:center; font-weight: 400; color:var(--tb-green); }

/* ====== Mobil ====== */
@media (max-width:720px){
  :root{
    --geo-width: 100%;
    --topbar-max-width: 100%;
    --topbar-outer-gap: 40px;
  }
  .profile-header,
  .section,
  .save-area{ width:calc(100% - 40px); max-width:calc(100% - 40px); }
  .details-row{ display:flex; flex-direction:column; gap:0; }
  .details-row > * + *{ margin-top:var(--space-3); }
  .details-left,
  .details-right{ display:contents; }
  .field-collaboration,
  #geoSection{ margin-bottom:var(--space-3); }
  .field-hourly{ margin-bottom:0; }
  .field-success{ margin-bottom:0; }
  .field-collaboration{ order:1; }
  #geoSection{ order:2; }
  .field-hourly{ order:3; }
  .field-success{ order:4; }
  .money-field{ width:fit-content; max-width:100%; }
  #coach_hourly_rate_net{ width:6ch; max-width:100%; }
  .hourly-grid{ grid-template-columns:1fr; }
  .field-hourly .field-tax-status{ width:100%; max-width:none; }
  .field-collaboration,
  #geoSection{
    width:100%;
  }
  #geoSection .field,
  #geoSection .map-wrapper{
    width:100%;
  }
  #geoSection .map-wrapper{
    display:block;
  }
  #map{
    width:100%;
  }
  /* KPI-Layout mobil: untereinander, bündig */
  .kpi-grid{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap: var(--space-2);
  }
  .kpi-box{
    flex:0 0 auto;
    min-width:0;
    width:100%;
  }
}