/* Gemeinsame Styles für alle Seiten – Farben & Grundlayout aus pfundesliga-app.html */
:root{
  --navy:#2D3142; --petrol:#0F5257; --petrol-text:#0F5257; --orange:#EF8354; --mustard:#E4A94A; --brick:#C9704E;
  --bg:#F5F2EC; --card:#ffffff; --text:#2D3142; --muted:#75726B; --border:#E6E1D6; --error:#B3261E; --success:#3F7A52; --mustard-text:#B07D22;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#1C1E26; --card:#262933; --text:#EDEBE4; --muted:#A6A296; --border:#3A3D47; --petrol-text:#5FC9BE; --error:#F2B8B5; --success:#7FC79A; --mustard-text:#E4A94A; } }
:root[data-theme="dark"]{ --bg:#1C1E26; --card:#262933; --text:#EDEBE4; --muted:#A6A296; --border:#3A3D47; --petrol-text:#5FC9BE; --error:#F2B8B5; --success:#7FC79A; --mustard-text:#E4A94A; }
*{box-sizing:border-box}
/* Ausgeblendete Elemente bleiben ausgeblendet – auch wenn sie sonst z. B. display:grid haben */
[hidden]{display:none !important;}
body{margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}

.app-header{background:var(--navy); padding:18px 14px 22px;}
.header-inner{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:14px;}
.header-inner svg{flex:0 0 auto; width:58px; height:58px;}
.header-inner .brand-text{font-family:Arial,Helvetica,sans-serif; font-weight:700; line-height:1;}
.header-inner .brand-text .a{color:#F5F5F5; font-size:1.3rem; letter-spacing:0.5px;}
.header-inner .brand-text .b{color:var(--orange); font-size:1.3rem; letter-spacing:1.5px;}
.header-inner .tagline{color:#B9BCC8; font-size:0.7rem; letter-spacing:1.5px; margin-top:2px;}
.header-actions{margin-left:auto; display:flex; gap:6px;}
.header-btn{background:transparent; color:#B9BCC8; border:1px solid #4A4F63; border-radius:20px; padding:7px 12px; font-size:0.75rem; font-weight:600; cursor:pointer; white-space:nowrap;}
.header-btn:hover{color:#F5F5F5; border-color:#B9BCC8;}
.header-btn.active{color:#F5F5F5; border-color:var(--orange);}
/* Schmale Handys: Logo und Schrift etwas kleiner, damit beide Buttons daneben passen */
@media (max-width:420px){
  .header-inner{gap:10px;}
  .header-inner svg{width:44px; height:44px;}
  .header-inner .brand-text .a, .header-inner .brand-text .b{font-size:1.05rem;}
  .header-inner .tagline{font-size:0.6rem; letter-spacing:1px;}
  .header-btn{padding:6px 9px;}
}
/* Sehr kleine Handys (z. B. iPhone SE 1. Generation) */
@media (max-width:359px){
  .header-inner{gap:8px;}
  .header-inner svg{width:36px; height:36px;}
  .header-inner .brand-text .a, .header-inner .brand-text .b{font-size:0.9rem;}
  .header-inner .tagline{font-size:0.5rem;}
  .header-actions{gap:4px;}
  .header-btn{padding:5px 7px; font-size:0.7rem;}
}
.link-btn{background:none; border:none; padding:0; color:var(--petrol-text); font:inherit; text-decoration:underline; cursor:pointer;}

.wrap{max-width:760px; margin:0 auto; padding:16px 14px 40px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:14px;}
.card h2{font-size:0.95rem; margin:0 0 12px; color:var(--petrol-text);}

label{font-size:0.75rem; color:var(--muted); display:block; margin-bottom:3px;}
select,input{width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.92rem;}
button.primary{background:var(--orange); color:#3a1f10; border:none; padding:11px; border-radius:8px; font-size:0.92rem; font-weight:700; cursor:pointer;}
button.primary:disabled{opacity:0.6; cursor:default;}

.error-msg{color:var(--error); font-size:0.85rem; min-height:1.2em; margin:0;}
.success-msg{color:var(--petrol-text); font-size:0.85rem; font-weight:600;}

/* Tabs */
.tabs{display:flex; gap:6px; overflow-x:auto; margin-bottom:16px; padding-bottom:4px;}
.tab-btn{flex:0 0 auto; border:1px solid var(--border); background:var(--card); color:var(--muted); padding:9px 14px; border-radius:20px; font-size:0.83rem; cursor:pointer; font-weight:600;}
.tab-btn.active{background:var(--petrol); color:#fff; border-color:var(--petrol);}
.panel{display:none;}
.panel.active{display:block;}
.placeholder-note{font-size:0.72rem; color:var(--muted); margin-top:8px;}

/* Vergleich: Filter-Chips & Diagramme */
.chip-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.chip{border:1px solid var(--border); border-radius:20px; padding:5px 11px; font-size:0.75rem; cursor:pointer; color:var(--muted); background:transparent;}
.chip.active{background:var(--text); color:var(--bg); border-color:var(--text);}
.chip .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px;}
.chart-box{position:relative; height:200px; margin-bottom:6px;}

/* Tabelle */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:0.78rem;}
th,td{text-align:left; padding:7px 9px; border-bottom:1px solid var(--border); white-space:nowrap;}
th{color:var(--muted); font-weight:700; background:var(--card);}
.entries-table th, .entries-table td{padding:7px 8px;}
.entries-table .num{text-align:center;}
.entries-table .person-head{text-align:center; border-bottom:none;}
.entries-table .group-start{border-left:2px solid var(--border);}
.entries-table .unit{display:block; font-weight:400; font-size:0.7rem;}
/* Datumsspalte bleibt beim seitlichen Scrollen stehen */
.entries-table .date-col{position:sticky; left:0; background:var(--card); z-index:1;}

/* Wochenziele */
.goal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.goal-header h2{margin:0;}
.achieved-box{display:flex; flex-direction:column; align-items:center; gap:3px;}
.achieved-label{font-size:0.65rem; color:var(--muted); font-weight:600; white-space:nowrap;}
.achieved-badge{font-size:0.9rem; font-weight:700; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:4px 11px; white-space:nowrap;}
/* Siegertreppchen */
.podium-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){ .podium-grid{grid-template-columns:1fr;} }
.podium-cat{border:1px solid var(--border); border-radius:12px; padding:12px 10px 0; background:var(--bg); overflow:hidden;}
.podium-cat h3{font-size:0.85rem; margin:0 0 6px; color:var(--text);}
.podium-note{font-weight:400; font-size:0.7rem; color:var(--muted);}
.podium{display:grid; grid-template-columns:repeat(3, 1fr); align-items:end; gap:6px; min-height:150px;}
.podium-empty{min-height:150px; margin:0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--muted);}
.step{display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0;}
.podium-face{position:relative; margin-bottom:4px;}
.podium-face .medal{position:absolute; right:-9px; bottom:-5px; font-size:1.05rem; line-height:1;}
.step .p-name{font-size:0.78rem; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.step .p-name.me{font-weight:800;}
.step .p-value{font-size:0.72rem; color:var(--muted); margin:1px 0 5px; white-space:nowrap;}
.step .block{width:100%; border-radius:6px 6px 0 0; font-weight:700; font-size:0.9rem; padding-top:5px; color:#fff;}
.step.pos-0 .block{height:64px;}
.step.pos-1 .block{height:44px;}
.step.pos-2 .block{height:30px;}
.step.place-1 .block{background:var(--orange);}
.step.place-2 .block{background:var(--petrol);}
.step.place-3 .block{background:var(--mustard); color:var(--navy);}
/* Profilfotos (ohne Foto: Kreis mit Anfangsbuchstabe) */
.avatar{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; object-fit:cover; font-weight:700; font-size:1.15rem; flex:0 0 auto; background:var(--border); vertical-align:middle;}
.avatar-lg{width:72px; height:72px; font-size:1.9rem;}
.avatar-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px;}
.pill-btn{display:inline-block; border:1px solid var(--border); border-radius:20px; padding:7px 14px; font-size:0.8rem; font-weight:600; cursor:pointer; color:var(--text); background:var(--bg); margin:0;}
.pill-btn:hover{border-color:var(--petrol-text);}
.avatar-row .link-btn{font-size:0.8rem;}
.achieved-box.pending .achieved-badge{filter:grayscale(1); opacity:0.55;}
.goal-week{margin:0 0 4px;}
.goal-progress{font-size:1.05rem; font-weight:700; color:var(--orange); margin:0 0 6px;}
.goal-progress.partial{color:var(--mustard-text);}
.goal-progress.all-done{color:var(--success);}
.goal-item{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border);}
.goal-item input[type=checkbox]{width:18px; height:18px; flex:0 0 auto; accent-color:var(--petrol);}
.goal-item label{flex:1; font-size:0.88rem; color:var(--text); margin:0; cursor:pointer;}
.goal-item.done label{text-decoration:line-through; color:var(--muted);}
.goal-delete{background:transparent; border:none; color:var(--muted); font-size:1.2rem; line-height:1; padding:2px 6px; cursor:pointer;}
.goal-delete:hover{color:var(--error);}
.add-goal{display:flex; gap:8px; margin-top:10px;}
.add-goal input{flex:1;}
.add-goal button{background:var(--petrol); color:#fff; border:none; border-radius:8px; padding:0 14px; font-weight:700; font-size:1.1rem; cursor:pointer;}

/* Sichtbarkeit im Profil */
.field-title{font-size:0.8rem; font-weight:700; color:var(--text); margin:4px 0 6px;}
.radio-row{display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text); margin:0; padding:5px 0; cursor:pointer;}
.radio-row input{width:auto; margin:0; accent-color:var(--petrol);}
.radio-row .dot{display:inline-block; width:10px; height:10px; border-radius:50%;}
.check-list{margin:2px 0 6px;}
.check-list.indented{padding-left:26px;}
button.primary.full-width{width:100%; margin-top:6px;}

/* Farbauswahl im Profil */
.swatches{display:grid; grid-template-columns:repeat(10, 1fr); gap:8px; margin:6px 0 4px; max-width:420px;}
.swatch{aspect-ratio:1; width:100%; border-radius:50%; border:none; padding:0; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
.swatch.selected{box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--text);}
.swatch:disabled{opacity:0.2; cursor:not-allowed;}
@media (max-width:420px){ .swatches{grid-template-columns:repeat(5, 1fr); max-width:220px;} }

/* Admin-Bereich */
.copy-btn{background:transparent; color:var(--petrol-text); border:1px solid var(--border); border-radius:16px; padding:5px 10px; font-size:0.75rem; font-weight:600; cursor:pointer; white-space:nowrap;}
.copy-btn:hover{border-color:var(--petrol-text);}
.admin-actions{display:flex; gap:6px;}
.danger-btn{color:var(--error);}
.danger-btn:hover{border-color:var(--error);}
.reset-result{border:2px solid var(--orange); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:0.85rem;}
.reset-result p{margin:0 0 8px;}
.reset-password-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.reset-password-row code{font-size:1.15rem; font-weight:700; letter-spacing:1px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:5px 10px; user-select:all;}

.reset-password-row code.invite-link{font-size:0.8rem; font-weight:600; letter-spacing:0; word-break:break-all;}
.add-goal button{white-space:nowrap;}
.add-goal button.small-text{font-size:0.85rem;}

/* Umschalter mit zwei Knöpfen (z. B. Übersicht / Meine Werte) */
.segmented{display:inline-flex; border:1px solid var(--border); border-radius:20px; padding:3px; margin-bottom:12px; background:var(--bg);}
.segmented button{border:none; background:transparent; color:var(--muted); padding:6px 14px; border-radius:16px; font-size:0.8rem; font-weight:600; cursor:pointer;}
.segmented button.active{background:var(--petrol); color:#fff;}

/* Eintrags-Formular (zweispaltig) */
.entry-form{display:grid; gap:10px; grid-template-columns:1fr 1fr;}
.entry-form .full{grid-column:1/-1;}