/* Themes nach Winkis Vorbildern (27.09.2026: "mir gefallen die beiden anderen design
   themes noch nicht ... ich mag die farben und die dekorativen bildelemente").
   Nur Optik - Menues, Aufbau und Inhalte bleiben unsere. Bilder in /img/themes/
   (OpenArt, Kling 3 Omni). Geladen nach style.css/pages.css. */

/* =====================================================================
   SPORTY (data-design="sporty-steel") - dunkler Beton, Cyan-Akzente,
   Stahl-/Cyan-Streifen im Kopf, Berg-Linien in der Seitenleiste.
   ===================================================================== */
:root[data-design="sporty-steel"]{
  --bg:#111b24; --surface:#1b2631; --surface-hover:#243240;
  --ink:#e8eef2; --ink-muted:#93a6b4; --border:#2f4150;
  --accent:#43c8fb; --accent-tab:#43c8fb; --accent-ink:#06131c; --accent-soft:#12384a;
  --accent-strong:#5fd2fc; --accent-tab-strong:#5fd2fc;
  --rail:#0d161e; --rail-ink:#b4c4ce;
  --nav-bg:rgba(22,32,42,.85); --nav-ink:#c3d0d9; --nav-active-bg:#43c8fb; --nav-active-ink:#06131c;
  --nav2-bg:#16212b; --nav2-ink:#9fb0bc;
  --sporty-line:rgba(151,171,184,.22);
}
body[data-design="sporty-steel"],
:root[data-design="sporty-steel"] body{
  background-color:#111b24;
  /* Inhaltsbereich: ruhiger dunkler Farbverlauf wie im Ausgangsbild (Winki, 28.09.2026: "Im
     inhaltsbereich ist es ein Farbverlauf") - die Beton-Textur liegt nur noch im Kopfband. */
  background-image:radial-gradient(ellipse 90% 60% at 35% 0%, #1e2b37 0%, rgba(30,43,55,0) 70%),
    linear-gradient(180deg, #17212b 0%, #121a22 55%, #0f161d 100%);
  background-size:auto; background-attachment:fixed;
}

/* Seitenleiste: noch dunkler, feine Kante, Berge + Spruch unten */
:root[data-design="sporty-steel"] .sidebar{
  background:linear-gradient(180deg, rgba(8,14,20,.92), rgba(10,18,26,.88));
  box-shadow:inset -1px 0 0 var(--sporty-line);
}
:root[data-design="sporty-steel"] .sidebar-footer{border-top-color:var(--sporty-line);}
:root[data-design="sporty-steel"] .sidebar-corner-art{color:#6f8799;}
@media (min-width: 861px){
  :root[data-design="sporty-steel"] .sidebar-footer{align-items:flex-start; text-align:left; padding-left:.8rem;}
  :root[data-design="sporty-steel"] .sidebar-corner-art{width:100%; max-width:190px; height:auto; aspect-ratio:2.2 / 1;}
}
.sporty-mountains{display:block; width:100%; height:100%; background-color:currentColor;
  -webkit-mask:url('/img/themes/sporty-steel-mountains.png') center / cover no-repeat; mask:url('/img/themes/sporty-steel-mountains.png') center / cover no-repeat;}
@media (min-width: 861px){
  :root[data-design="sporty-steel"] .sidebar-quote{
    font-family:'Karla', sans-serif; font-size:.78rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.28em; line-height:1.9; color:#b9c7d1;
  }
}
:root[data-design="sporty-steel"] .theme-flourish{display:none;}

/* Kopfband neu (Winki, 28.09.2026: "der header hat einen texturierten hintergrund und ein
   grafik element ... wir koennen da aber kuechenpost und profil-bild-menue reinpacken"):
   Die Kopfzeile selbst (.masthead) bekommt die scharfe Beton-Textur und rechts die
   transparente Streifen-Grafik (SVG); Kuechenpost und Profil sitzen darauf. Das
   separate Kopfbild (.theme-header-banner) entfaellt. */
:root[data-design="sporty-steel"] .theme-header-banner{display:none !important;}
:root[data-design="sporty-steel"] .masthead{
  position:relative; padding:1.1rem 1.4rem 1.1rem 1.6rem; min-height:5.6rem; border-radius:var(--radius-card);
  background:
    url('/img/themes/sporty-stripes.svg') right 9rem center / auto 100% no-repeat,
    linear-gradient(rgba(9,14,19,.62), rgba(9,14,19,.62)),
    url('/img/themes/sporty-steel-concrete-hd.jpg') center / cover;
  box-shadow:inset 0 0 0 1px var(--sporty-line), 0 10px 30px -18px rgba(0,0,0,.7);
}
:root[data-design="sporty-steel"] .masthead-right{position:relative; z-index:1;}
/* Kopfbild randlos (Winki, 28.09.2026: "header bild ... bis links ans menü und rechts
   bis an den fensterrand ... keinen rahmen, keine abgerundete ecken"). Die Kopfzeile
   greift per negativem Rand ueber das Innenpolster von .wrap hinaus; die Breite der
   Inhaltsspalte kommt ueber container units (100cqw) von .main-col. z-index: das
   Konto-Menue liegt sonst unter der Unterseiten-Leiste (#sectionSubnav, z-index 1). */
@media (min-width: 861px){
  :root[data-design="sporty-steel"] .main-col{container-type:inline-size;}
  :root[data-design="sporty-steel"] .masthead{
    --masthead-bleed:max(1.5rem, calc((100cqw - 1180px) / 2 + 1.5rem));
    z-index:30; border-radius:0; box-shadow:none;
    margin:-2.25rem calc(-1 * var(--masthead-bleed)) 1.75rem;
    padding:1.6rem var(--masthead-bleed) 1.4rem;
  }
}
@media (max-width: 860px){
  :root[data-design="sporty-steel"] .masthead{
    border-radius:0; min-height:0; padding:.55rem 16px;
    background:
      url('/img/themes/sporty-stripes.svg') right 5.5rem center / auto 100% no-repeat,
      linear-gradient(rgba(9,14,19,.7), rgba(9,14,19,.7)),
      url('/img/themes/sporty-steel-concrete-hd.jpg') center / cover;
  }
}
/* alt: Kopfband als eigenes Bild */
:root[data-design="sporty-steel"] .theme-header-banner{
  position:relative; height:5.2rem; margin:-.5rem 0 1.1rem; border-radius:var(--radius-card);
  background-image:url('/img/themes/sporty-steel-header3.jpg'); background-size:cover; background-position:center 20%;
  box-shadow:inset 0 0 0 1px var(--sporty-line);
}
/* Leitspruch rechts im Kopfband entfernt (Winki, 28.09.2026: "der text rechts oben im header muss weg") */
:root[data-design="sporty-steel"] .theme-header-banner::after{
  content:none; white-space:pre; position:absolute; right:1.6rem; top:50%; transform:translateY(-50%); text-align:left;
  font-family:'Karla', sans-serif; font-weight:700; font-size:.82rem; line-height:1.55; letter-spacing:.3em;
  text-transform:uppercase; color:#c9d6de; opacity:.9;
}

/* Ueberschriften der Karten/Abschnitte in Cyan mit kurzem Unterstrich */
:root[data-design="sporty-steel"] .rb-panel-head{position:relative; padding-bottom:.55rem; box-shadow:inset 0 -1px 0 var(--sporty-line);}
:root[data-design="sporty-steel"] .rb-panel-head::before{content:""; position:absolute; left:0; bottom:0; width:3.2rem; height:2px; background:var(--accent);}
:root[data-design="sporty-steel"] .rb-panel-head h2,
:root[data-design="sporty-steel"] .category-head h2{color:var(--accent);}
:root[data-design="sporty-steel"] .masthead h1{color:#f2f6f8; letter-spacing:.01em;}

/* Karteireiter & Karte */
:root[data-design="sporty-steel"] .rb-panel{background:rgba(22,32,42,.82); border-color:var(--sporty-line);}
:root[data-design="sporty-steel"] .rb-toptab{background:rgba(22,32,42,.55); color:#9fb0bc;}
:root[data-design="sporty-steel"] .rb-toptab.active{background:rgba(22,32,42,.82); color:#fff; box-shadow:inset 0 2px 0 var(--accent);}

/* Kacheln */
:root[data-design="sporty-steel"] .tile{
  background:linear-gradient(180deg, #1d2934, #17222c); border:1px solid var(--sporty-line);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
:root[data-design="sporty-steel"] .tile:hover{border-color:rgba(67,200,251,.55);}
:root[data-design="sporty-steel"] .tile-name{color:#f2f6f8;}

/* Tags als Pillen mit Cyan-Rand */
:root[data-design="sporty-steel"] .badge-diet,
:root[data-design="sporty-steel"] .badge-freeze,
:root[data-design="sporty-steel"] .badge-airfryer{
  background:rgba(67,200,251,.10); color:#8fdcfb; border:1px solid rgba(67,200,251,.45);
}

/* Filter-Knoepfe/Chips: dunkel mit heller Kante */
:root[data-design="sporty-steel"] .chip,
:root[data-design="sporty-steel"] .search-input,
:root[data-design="sporty-steel"] .btn-ghost{
  background:rgba(17,27,36,.7); border-color:rgba(201,214,222,.28); color:#dbe4ea;
}
:root[data-design="sporty-steel"] .chip.active{background:var(--accent-soft); border-color:var(--accent); color:#e8f7ff;}

/* Aktiver Menuepunkt wie im Vorbild: Cyan-Kante links, leicht hinterlegt (statt Register) */
@media (min-width: 861px){
  :root[data-design="sporty-steel"] .tab-btn.active,
  :root[data-design="sporty-steel"] .tab-btn.active:hover{
    margin-right:0; border:none; border-radius:0; color:#fff;
    background:linear-gradient(90deg, rgba(67,200,251,.20), rgba(67,200,251,.04));
    box-shadow:inset 3px 0 0 var(--accent);
  }
}
:root[data-design="sporty-steel"] .tab-btn .tab-icon{color:#dbe4ea;}
:root[data-design="sporty-steel"] .tab-btn.active .tab-icon{color:var(--accent);}
:root[data-design="sporty-steel"] .tile .tile-meta{gap:.35rem;}
:root[data-design="sporty-steel"] .tile .badge{padding:.12rem .5rem; border-radius:999px;}

/* =====================================================================
   KIDS (data-design="color-kids") - warmes Creme, Pastell-Aquarell,
   Regenbogen + Sonne im Kopf, Karotte & Erdbeere in der Seitenleiste,
   bunte Pillen-Reiter. Aquarelle mit transparentem Hintergrund (Weiss
   per Farbe-zu-Transparenz entfernt).
   ===================================================================== */
:root[data-design="color-kids"]{
  --bg:#fff6ea; --surface:#ffffff; --surface-hover:#fff0e0;
  --ink:#3b2a1a; --ink-muted:#8a6f55; --border:#f6dcc6;
  --accent:#ff7a59; --accent-tab:#ff6f7d; --accent-ink:#ffffff; --accent-soft:#ffe1d3;
  --accent-strong:#d9482a; --accent-tab-strong:#d63b50;
  --rail:#fff1df; --rail-ink:#5b4632;
  --nav-bg:#ffe4cf; --nav-ink:#5b4632; --nav-active-bg:#ff6f7d; --nav-active-ink:#ffffff;
  --nav2-bg:#fff4e8; --nav2-ink:#6b4c29;
  --kids-blue:#8fd3f4; --kids-mint:#b8e6c8; --kids-yellow:#ffd970; --kids-lilac:#d9c6f5; --kids-pink:#ffb3c1; --kids-peach:#ffcfa8;
}
/* Hintergrund: Creme mit weichen Pastell-Klecksen (reines CSS) */
:root[data-design="color-kids"] body{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 8% 18%, rgba(143,211,244,.35) 0 90px, transparent 91px),
    radial-gradient(circle at 96% 8%, rgba(255,179,193,.35) 0 70px, transparent 71px),
    radial-gradient(circle at 92% 62%, rgba(255,217,112,.30) 0 60px, transparent 61px),
    radial-gradient(circle at 4% 78%, rgba(184,230,200,.40) 0 80px, transparent 81px),
    radial-gradient(circle at 60% 96%, rgba(217,198,245,.35) 0 70px, transparent 71px);
  background-attachment:fixed;
}
:root[data-design="color-kids"] .sidebar{background:linear-gradient(180deg, #fff4e6, #fff0de);}

/* Kopfband: Regenbogen + Sonne (Aquarell) rechts, Spruch handschriftlich */
:root[data-design="color-kids"] .theme-header-banner{
  display:block; position:relative; height:7rem; margin:-.8rem 0 .6rem; border-radius:var(--radius-card);
  background:url('/img/themes/kids-header.png') right center / auto 100% no-repeat;
}
:root[data-design="color-kids"] .theme-header-banner::after{
  content:"Gesunde Kinder.\A Glückliche Familien."; white-space:pre; position:absolute; left:.4rem; top:50%;
  transform:translateY(-50%) rotate(-3deg); font-family:'Caveat', cursive; font-size:1.55rem; line-height:1.05;
  color:#4d7a55;
}

/* Seitenleiste unten: Karotte & Erdbeere */
@media (min-width: 861px){
  :root[data-design="color-kids"] .sidebar-corner-art{width:100%; max-width:170px; height:auto; aspect-ratio:3 / 4;}
}
.kids-friends{display:block; width:100%; height:100%; background:url('/img/themes/kids-friends.png') center / contain no-repeat;}
:root[data-design="color-kids"] .sidebar-quote{color:#d9482a;}
:root[data-design="color-kids"] .theme-flourish{display:none;}

/* Aktiver Menuepunkt: hellblaue Pille wie im Vorbild */
@media (min-width: 861px){
  :root[data-design="color-kids"] .tab-btn.active,
  :root[data-design="color-kids"] .tab-btn.active:hover{
    margin-right:.85rem; border:none; border-radius:999px; background:var(--kids-blue); color:#1f3b4d;
  }
}
:root[data-design="color-kids"] .tab-btn.active .tab-icon{color:#1f5f86;}

/* Karteireiter & Karte rund und freundlich */
:root[data-design="color-kids"] .rb-toptab{background:#ffe9d6; color:#6b4c29;}
:root[data-design="color-kids"] .rb-toptab.active{background:#fff; color:var(--accent-tab-strong);}
:root[data-design="color-kids"] .rb-panel{border-color:#f6dcc6;}
:root[data-design="color-kids"] .rb-panel-head h2{color:#3b2a1a;}

/* Kacheln: weiss, weich, Schatten */
:root[data-design="color-kids"] .tile{border:1px solid #f6e3d2; border-radius:18px; box-shadow:0 6px 16px rgba(214,140,90,.12);}
:root[data-design="color-kids"] .tile .tile-photo{border-radius:17px 17px 0 0;}
:root[data-design="color-kids"] .badge-diet{background:#e3f5e9; color:#2f6b45; border:1px solid #bfe3cc;}

/* Filter-Chips: Pink-Rand wie im Vorbild */
:root[data-design="color-kids"] .chip{border-color:#ffc2cd; color:#b3364b; background:#fff;}
:root[data-design="color-kids"] .chip.active{background:#ffe2e8; border-color:#ff8fa3; color:#9e2037;}
:root[data-design="color-kids"] .btn-primary{background:var(--accent); color:#fff;}
@media (max-width: 600px){
  :root[data-design="color-kids"] .theme-header-banner{height:5.5rem; background-position:center;}
  :root[data-design="color-kids"] .theme-header-banner::after{display:none;}
  :root[data-design="sporty-steel"] .theme-header-banner::after{font-size:.68rem; right:1rem;}
}


/* =====================================================================
   Level-2-Menue (Seiten-Reiter, #sectionSubnav) EINHEITLICH in allen Designs
   (28.09.2026, Winki: "Über die Designs hinweg gibt es ... eine sehr unterschiedliche
   Darstellung des Level 2 Menüs. Das muss einheitlicher werden"). Gleiche Leiste,
   Abstaende und Knoepfe - nur die Farben kommen aus dem Design (--nav-*).
   Handy: eine wischbare Zeile statt mehrerer umbrechender Zeilen.
   ===================================================================== */
#sectionSubnav.section-subnav{
  display:flex; flex-wrap:wrap; gap:4px; padding:4px; align-items:center;
  background:var(--nav-bg); border-radius:12px; box-shadow:none;
}
#sectionSubnav .section-subtab-btn{
  font:inherit; font-size:.875rem; font-weight:600; line-height:1.2; letter-spacing:0;
  padding:.5rem 1rem; border:none; border-radius:9px; background:transparent; color:var(--nav-ink);
  box-shadow:none; filter:none; white-space:nowrap;
}
/* Ohne sichtbare Reiter (z.B. Mein Tag) verschwindet die Leiste ganz - sonst bliebe ein leerer Balken. */
#sectionSubnav.section-subnav:empty,
#sectionSubnav.section-subnav:not(:has(> .section-subtab-btn:not([hidden]))){display:none;}
#sectionSubnav .section-subtab-btn:hover{background:color-mix(in srgb, var(--nav-ink) 10%, transparent); color:var(--nav-ink);}
#sectionSubnav .section-subtab-btn.active,
#sectionSubnav .section-subtab-btn.active:hover{background:var(--nav-active-bg); color:var(--nav-active-ink); font-weight:700; box-shadow:none;}
@media (max-width: 860px){
  #sectionSubnav.section-subnav{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
  #sectionSubnav.section-subnav::-webkit-scrollbar{display:none;}
  #sectionSubnav .section-subtab-btn{flex:none;}
  .section-subnav-row > #sectionSubnav{flex:1 1 100%; min-width:0; max-width:100%;}
}