/* Ayurveda im Tageslauf — der Tag als Zifferblatt (maquette B, 21/10/2026). Polices système, aucune ressource externe. */
:root{
  --nacht:#1b2343; --nacht2:#2a3460; --morgen:#f3b48b; --hell:#f5f6fb; --text:#222740; --grau:#5d6380;
  --ka:#86aed0; --pi:#ef9f5c; --va:#b8a5da; --linie:#d5d8e6; --link:#3a4aa0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hell);color:var(--text);font:16.5px/1.7 "Trebuchet MS",Verdana,"Segoe UI",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
.breite{max-width:1120px;margin:0 auto;padding:0 22px}
.saut{position:absolute;left:-9999px;top:0;background:#fff;color:var(--nacht);padding:8px 14px;z-index:5}
.saut:focus{left:10px;top:10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bandeau horaire : la navigation est une ligne de temps */
.kopf{background:var(--nacht);color:#fff}
.kopf .breite{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:18px;padding-bottom:0}
.name{color:#fff;text-decoration:none;font-size:21px;font-weight:700;padding-bottom:14px;display:flex;gap:12px;align-items:center}
.name svg{width:34px;height:34px;flex:none}
.name small{display:block;font-weight:400;font-size:13px;color:#aab0cf;letter-spacing:.04em}
.zeitleiste{display:flex;list-style:none;margin:0;padding:0}
.zeitleiste a{display:block;color:#c9cde6;text-decoration:none;font-size:13.5px;padding:8px 14px 12px;border-top:3px solid transparent;text-align:center;line-height:1.25}
.zeitleiste a b{display:block;font-family:Consolas,"Courier New",monospace;font-size:17px;color:#fff}
.zeitleiste a:hover,.zeitleiste a[aria-current]{border-top-color:var(--morgen);background:var(--nacht2)}

/* Accueil : le ciel et le cadran */
.himmel{background:linear-gradient(180deg,var(--nacht) 0%,var(--nacht2) 55%,#5b4a6e 85%,var(--morgen) 100%);color:#fff}
.himmel .breite{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:56px;align-items:center;padding-top:40px;padding-bottom:64px}
.zifferblatt{width:100%;height:auto}
.zifferblatt .ka{fill:var(--ka)} .zifferblatt .pi{fill:var(--pi)} .zifferblatt .va{fill:var(--va)}
.zifferblatt path{stroke:var(--nacht);stroke-width:3}
.zifferblatt line{stroke:#c9cde6;stroke-width:2}
.zifferblatt text{text-anchor:middle;font-family:"Trebuchet MS",Verdana,sans-serif}
.zifferblatt .uhr{fill:#fff;font-size:17px;font-family:Consolas,"Courier New",monospace}
.zifferblatt .ph{fill:var(--nacht);font-size:15px;font-weight:700}
.zifferblatt .mitte{fill:var(--nacht)}
.zifferblatt .sonne{fill:var(--morgen)}
.zifferblatt .klein{fill:#c9cde6;font-size:12px}
.himmel h1{font-size:clamp(30px,4vw,44px);line-height:1.15;margin:0 0 18px;font-weight:700}
.himmel p{color:#e4e6f3;margin:0 0 14px}
.legende{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:20px}
.legende span{display:flex;align-items:center;gap:8px}
.legende i{width:14px;height:14px;border-radius:3px;display:inline-block}

/* La frise horaire */
.tag{padding:56px 0 30px}
.tag>h2,.rund>h2,.grund h2{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin:0 0 26px}
.abschnitt{display:grid;grid-template-columns:110px 28px minmax(0,1fr) 170px;gap:0 22px;align-items:start}
.abschnitt .zeit{font-family:Consolas,"Courier New",monospace;font-size:26px;font-weight:700;text-align:right;line-height:1.2;padding-top:2px}
.abschnitt .zeit small{display:block;font-size:13px;color:var(--grau);font-weight:400}
.abschnitt .strich{position:relative;align-self:stretch}
.abschnitt .strich::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--linie)}
.abschnitt .strich::after{content:"";position:absolute;left:6px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--c,var(--ka));box-shadow:0 0 0 4px var(--hell)}
.abschnitt .inhalt{padding-bottom:38px}
.abschnitt h3{margin:0 0 6px;font-size:21px;line-height:1.3}
.abschnitt p{margin:0}
.abschnitt img{width:170px;height:170px;object-fit:cover;border-radius:4px;margin-bottom:26px}
.abschnitt .ohne{width:170px;height:1px}

/* Autour du jour : les autres pages */
.rund{padding:20px 0 40px}
.rund ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.rund li{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--c,var(--ka));border-radius:6px;padding:16px 18px}
.rund li b{display:block;font-family:Consolas,"Courier New",monospace;color:var(--grau);font-size:14px;font-weight:400}
.rund li a{font-weight:700;font-size:18px;text-decoration:none}
.rund li a:hover{text-decoration:underline}
.rund li p{margin:6px 0 0;font-size:15px}
.rund .unter{color:var(--grau);margin:-14px 0 20px}

.grund{border-top:1px solid var(--linie);padding:40px 0 60px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grund h3{margin:0 0 8px;font-size:19px}
.grund p{margin:0 0 12px}
.kasten{background:#fff;border:1px solid var(--linie);border-radius:6px;padding:18px 22px;font-size:15px}

/* Pages intérieures */
.seitenkopf{background:var(--nacht);color:#fff}
.seitenkopf .breite{padding-top:34px;padding-bottom:34px;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.seitenkopf .gross{font-family:Consolas,"Courier New",monospace;font-size:clamp(46px,8vw,88px);line-height:1;color:var(--morgen);font-weight:700;white-space:nowrap}
.seitenkopf .gross.klein{font-size:clamp(38px,6vw,64px)}
.seitenkopf h1{font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:0 0 6px}
.seitenkopf p{margin:0;color:#c9cde6}
.seitenkopf>.breite>div{min-width:0;flex:1 1 320px}
.spalten{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:44px 0 30px}
.spalten.einzeln{grid-template-columns:minmax(0,760px)}
.vorspann{font-size:18px;color:#3a405c;margin:0 0 26px!important}
.lesen h2{font-size:23px;margin:34px 0 10px;line-height:1.3}
.lesen h3{font-size:19px;margin:24px 0 8px}
.lesen p{margin:0 0 15px}
.lesen ul,.lesen ol{margin:0 0 16px;padding-left:22px}
.lesen li{margin-bottom:5px}
.rand figure{margin:0 0 26px}
.rand img{border-radius:4px;width:100%;aspect-ratio:1;object-fit:cover}
.rand figcaption{font-size:13px;color:var(--grau);margin-top:6px;font-family:Consolas,"Courier New",monospace}

/* Planning et tableaux */
.plan{margin:26px 0 30px;background:#fff;border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.plan .zeile{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--linie)}
.plan .zeile.kopfzeile{border-top:0;background:var(--nacht);color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.plan .zeile>div{padding:10px 14px;min-width:0}
.plan .zeile>div+div{border-left:1px solid var(--linie)}
.plan .zeile.kopfzeile>div+div{border-left-color:var(--nacht2)}
.plan .z{font-family:Consolas,"Courier New",monospace;font-weight:700;background:#eef0f8}
.plan .zeile.kopfzeile .z{background:var(--nacht)}
.plan .leer{color:#8d93ae;font-style:italic}
.tabelle{overflow-x:auto;margin:20px 0 26px}
.tabelle table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
.tabelle th,.tabelle td{border:1px solid var(--linie);padding:8px 12px;text-align:left;vertical-align:top}
.tabelle th{background:#eef0f8}

.rezept{background:#fff;border:2px solid var(--nacht);border-radius:6px;padding:22px 24px;margin:28px 0}
.rezept h3{margin:0 0 4px;font-size:21px}
.rezept .meta{font-family:Consolas,"Courier New",monospace;font-size:13.5px;color:var(--grau);margin:0 0 14px}
.rezept .zwei{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px}
.rezept ul,.rezept ol{margin:0;padding-left:20px}
.rezept li{margin-bottom:5px}
.hinweis{background:#eef0f8;border-left:4px solid var(--nacht2);padding:14px 18px;margin:22px 0;border-radius:0 6px 6px 0}
.hinweis p{margin:0 0 8px}.hinweis p:last-child{margin:0}
.uhrband{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:22px 0 6px}
.uhrband i{display:block}
.uhrlegende{display:flex;justify-content:space-between;font-family:Consolas,"Courier New",monospace;font-size:12.5px;color:var(--grau);margin:0 0 24px}
.quelle{font-size:14px;border-top:1px solid var(--linie);padding-top:14px;margin-top:30px;color:var(--grau)}
.mot-fin{font-size:14px;color:var(--grau);font-style:italic}
.weiter{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0 0 56px;font-size:15px}
.weiter a{font-family:Consolas,"Courier New",monospace}
.liste-404{columns:2;gap:30px}

.fuss{background:var(--nacht);color:#aab0cf;font-size:14px}
.fuss .breite{padding-top:26px;padding-bottom:26px}
.fusszeile{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.fuss a{color:#e4e6f3}
.alle ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--nacht2);display:flex;flex-wrap:wrap;gap:6px 20px}
.alle b{font-family:Consolas,"Courier New",monospace;font-weight:400;color:#8f96bb;margin-right:6px}

@media (max-width:900px){
  .himmel .breite{grid-template-columns:1fr;gap:26px}
  .zifferblatt{max-width:400px;margin:0 auto}
  .abschnitt{grid-template-columns:76px 28px minmax(0,1fr)}
  .abschnitt img,.abschnitt .ohne{grid-column:3;width:100%;height:auto;aspect-ratio:16/9;margin:-24px 0 36px}
  .abschnitt .ohne{display:none}
  .abschnitt .zeit{font-size:20px}
  .grund{grid-template-columns:1fr}
  .spalten,.spalten.einzeln{grid-template-columns:minmax(0,1fr);gap:10px}
  .rand{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .rand figure{margin:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .breite{padding:0 16px}
  .breite.spalten{padding-top:28px;padding-bottom:24px}
  .name{font-size:19px}
  .kopf nav{width:100%;min-width:0}
  .zeitleiste{width:100%;justify-content:space-between}
  .zeitleiste li{flex:1 1 0;min-width:0}
  .zeitleiste a{padding:8px 2px 10px;font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
  .zeitleiste a b{font-size:15px}
  .abschnitt{grid-template-columns:58px 22px minmax(0,1fr);gap:0 12px}
  .abschnitt .zeit{font-size:17px}
  .abschnitt .strich::before{left:10px}
  .abschnitt .strich::after{left:3px}
  .plan .zeile{grid-template-columns:58px minmax(0,1fr)}
  .plan .zeile>div:nth-child(3){grid-column:2;border-left:1px solid var(--linie);border-top:1px dashed var(--linie)}
  .rezept{padding:18px 16px}
  .rezept .zwei{grid-template-columns:1fr}
  .seitenkopf .breite{gap:12px}
  .liste-404{columns:1}
}