/* ---------- Header ---------- */
header.brand{
  position:relative;
  /* Unter dem Kopf steht eine deutliche Luecke: der Kopf gehoert zur App,
     darunter faengt der Inhalt an - das soll man sehen, ohne hinzuschauen. */
  padding:6px 20px 30px;
  text-align:center;
  background:var(--ground);
}
/* Auf dem Rechner steht darunter noch die Reiterleiste, die bringt ihren
   eigenen Abstand mit. */
@media (min-width:760px){ header.brand{padding-bottom:10px;} }
/* Die Einstellungen sitzen rechts neben dem Logo, damit die Reiterleiste
   unten bei fuenf Reitern bleibt - dort zaehlt jeder Millimeter. Die Zeile
   ist genau so hoch wie das Logo, also sitzt der Knopf auf dessen Mitte,
   egal wie gross das Logo gerade ist. */
.brand-zeile{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  /* In der Mitte steht kein Logo mehr (so hat Evi es gewollt) - die Zeile
     behaelt seine Hoehe, damit die beiden Knoepfe stehen bleiben, wo sie waren. */
  min-height:64px;
}
@media (min-width:600px){ .brand-zeile{min-height:84px;} }
@media (min-width:760px){ .brand-zeile{min-height:104px;} }
/* Zwei gleiche Knoepfe links und rechts vom Logo: das Profil und die
   Einstellungen. Sie sitzen auf der Mitte des Logos, egal wie gross es ist.
   Unter jedem steht sein Wort - ein Bild oder ein Buchstabe allein sagt
   niemandem, dass dahinter die eigenen Angaben liegen. */
.kopf-set{
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  max-width:86px;padding:0;cursor:pointer;
  background:none;border:none;color:var(--accent-deep);
  font-family:var(--font-body);
}
.kopf-set.links{right:auto;left:0;}
.ks-kreis{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  transition:background .15s,border-color .15s,transform .12s;
}
.ks-kreis svg{width:22px;height:22px;}
.kopf-set:active .ks-kreis{transform:scale(.93);}
.kopf-set.active .ks-kreis{background:var(--accent-soft);border-color:var(--accent);}
.ks-wort{
  max-width:100%;font-size:8.8px;font-weight:700;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kopf-set.active .ks-wort{color:var(--accent-deep);}
/* Ist ein Bild gewaehlt, fuellt es den Kreis ganz aus. */
.kopf-bild{width:100%;height:100%;object-fit:cover;display:block;}
.ks-kreis:has(.kopf-bild){background:var(--surface-2);}
.kopf-ich{
  font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1;
  font-variation-settings:'opsz' 40,'SOFT' 40;
}
@media (min-width:600px){
  .kopf-set{max-width:96px;}
  .ks-kreis{width:50px;height:50px;} .ks-kreis svg{width:24px;height:24px;}
  .ks-wort{font-size:9.5px;} .kopf-ich{font-size:21px;}
}
@media (min-width:760px){
  .kopf-set{max-width:110px;}
  .ks-kreis{width:54px;height:54px;} .ks-kreis svg{width:26px;height:26px;}
  .ks-wort{font-size:10.5px;} .kopf-ich{font-size:23px;}
}
.logo{
  width:64px;height:64px;max-width:26%;
  display:block;margin:0 auto;border-radius:50%;
  filter:drop-shadow(0 3px 9px rgba(104,56,38,.16));
  /* The logo carries its own near-white disc. Multiplied into the dimmed
     ground it sits in the page instead of shining out of it, while the
     drawing itself keeps its colour. */
  mix-blend-mode:multiply;
}
@media (min-width:600px){ .logo{width:84px;height:84px;} }
@media (min-width:760px){ .logo{width:104px;height:104px;} }

/* ---------- Top nav (desktop) ---------- */
nav.topnav{
  display:none;
  justify-content:center;
  gap:4px;
  padding:4px 20px 24px;
  flex-wrap:wrap;
}
nav.topnav button{
  background:none;border:none;color:var(--ink-soft);
  font-size:14px;font-weight:500;padding:10px 16px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:background .15s,color .15s;
}
nav.topnav button svg{width:16px;height:16px;flex:none;}
nav.topnav button.active{background:var(--accent-soft);color:var(--accent-deep);}

/* ---------- Bottom tab bar (mobile) ---------- */
nav.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;justify-content:center;
  /* Die Leiste liegt unten am Bildschirmrand an und geht ueber die ganze
     Breite - so hat Evi es gewollt (vorher schwebte sie 18 px darueber).
     Den Abstand zum Home-Balken des iPhones haelt die Leiste selbst
     (tabbar-inner), damit ihr Glas bis an den Rand reicht. Was ueber ihr
     schwebt (Leiste zum Uebernehmen, Hinweis, Zen), rueckt mit. */
  padding:0;
  pointer-events:none;
  z-index:40;
}
/* An opaque band under the floating bar that fades out upwards, so the page
   ends at the tab bar instead of showing half-read text around and beneath
   the pill. */
nav.tabbar::before{
  content:'';
  position:absolute;left:0;right:0;bottom:0;top:-46px;
  background:linear-gradient(to bottom, rgba(var(--ground-rgb),0) 0, var(--ground) 46px);
  pointer-events:none;
}
nav.tabbar .tabbar-inner{
  position:relative;
  pointer-events:auto;
  display:flex;justify-content:space-between;gap:1px;
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:6px;
}
nav.tabbar button{
  flex:1;position:relative;
  background:none;border:none;color:var(--ink-soft);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  /* Groessere Reiter und Zeichen - so hat Evi es gewollt, damit der Daumen
     sicher trifft, aber nicht wuchtig: jeder Reiter gut 52 px hoch, das
     Zeichen 23 px. */
  font-size:10.5px;font-weight:600;letter-spacing:-.01em;padding:7px 1px 4px;border-radius:15px;
  /* Oben buendig, nicht mittig: bricht ein Wort in zwei Zeilen, bleiben
     die Zeichen trotzdem auf einer Linie. */
  min-width:0;min-height:52px;justify-content:flex-start;
  transition:background .15s,color .15s;
}
nav.tabbar button svg{width:23px;height:23px;flex:none;}
/* Die Reiter teilen sich die Breite. Das laengste Wort bekommt zur Not
   drei Punkte, statt aus seinem Feld zu laufen. */
nav.tabbar button span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Auf schmalen Handys wird das laengste Wort lieber getrennt als
   abgeschnitten - es steht dann in zwei Zeilen da. */
@media (max-width:420px){
  nav.tabbar button span{
    white-space:normal;text-overflow:clip;line-height:1.1;text-align:center;
  }
}
/* A hairline between each pair of tabs, inset so it reads as a divider
   rather than a full-height rule. Mit fuenf Reitern wird es dafuer zu eng -
   die Beschriftungen stuenden sonst direkt am Strich. */
nav.tabbar button + button::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:var(--line);
}
/* Auf dem Handy bleibt der Strich, wird aber kuerzer und die Reiter ruecken
   eine Spur auseinander - so ist die Leiste unterteilt, ohne dass eine
   Beschriftung an den Strich stoesst. */
@media (max-width:520px){
  nav.tabbar .tabbar-inner{gap:4px;}
  nav.tabbar button{font-size:10px;}
  nav.tabbar button + button::before{left:-2px;top:30%;bottom:30%;}
}
/* Je schmaler das Handy, desto kleiner die Beschriftung - damit zwischen
   Wort und Strich Luft bleibt, statt dass beides aneinander klebt. */
@media (max-width:400px){ nav.tabbar button{font-size:9.5px;} }
@media (max-width:360px){ nav.tabbar button{font-size:9px;} }
/* The active tab is a filled pill, so the lines touching it are dropped
   instead of cutting across its rounded edge. */
nav.tabbar button.active::before,
nav.tabbar button.active + button::before{display:none;}
nav.tabbar button.active{color:var(--accent-deep);background:var(--accent-soft);}


@media (min-width:760px){
  nav.tabbar{display:none;}
  nav.topnav{display:flex;}
  #app{padding-bottom:48px;}
}