/* =====================================================================
   mittelmeerbasar.de - Nachschlagewerk zum Mittelmeer
   Entwurf 8: Atlas-Struktur mit Majolika-Waerme (_design/8-hybrid.html)
   Schriften: Instrument Serif (Display) + Outfit (Text), lokal
   ===================================================================== */

@font-face{font-family:'Instrument';src:url('/assets/fonts/InstrumentSerif-Latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument';src:url('/assets/fonts/InstrumentSerif-LatinExt.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-Latin.woff2') format('woff2');
  font-weight:300 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-LatinExt.woff2') format('woff2');
  font-weight:300 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#FDFAF2; --paper2:#FFFFFF; --sand:#F5EEDD;
  --ink:#241C16; --ink-soft:#4C4038; --muted:#877A6B; --rule:#E4D9C2;
  /* Farbleitsystem: jede Rubrik durchgaengig in ihrer Farbe */
  --c-meer:#1B4E9B; --c-land:#6E7F3E; --c-hist:#C4522E; --c-kueche:#C8871A; --c-raetsel:#6A5A9B;
  --c-meer-t:#E2E9F5; --c-land-t:#EDF0E2; --c-hist-t:#F8E8E1; --c-kueche-t:#FBF0DA; --c-raetsel-t:#EAE6F2;
  --safran:#E2A22B;
  --rubrik:var(--c-meer); --rubrik-t:var(--c-meer-t);
  --maxw:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* kein overflow-x:hidden - das wuerde echte Ueberlaeufe verstecken statt melden.
   Bei 500px Viewport gemessen: scrollWidth 485, keine ueberlaufenden Elemente. */
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;font-size:16.5px;line-height:1.7;
  font-variation-settings:"wght" 350;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--c-meer);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:'Instrument',Georgia,serif;font-weight:400;line-height:1.08;margin:0;letter-spacing:-.015em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--paper2);padding:8px 14px;z-index:99}

/* Kachelborduere */
.tile{height:11px;background-color:var(--c-meer);
  background-image:radial-gradient(circle at 50% 50%,var(--safran) 1.9px,transparent 2.1px),
                   radial-gradient(circle at 0 0,var(--c-hist) 1.6px,transparent 1.8px),
                   radial-gradient(circle at 100% 100%,var(--c-hist) 1.6px,transparent 1.8px);
  background-size:11px 11px}

/* Kopf */
.top{background:var(--paper2);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:72px;flex-wrap:wrap}
.brand{font-family:'Instrument',serif;font-size:26px;letter-spacing:-.01em;color:var(--c-meer)}
.brand em{font-style:italic;color:var(--c-hist)}
.nav{margin-left:auto;display:flex;gap:4px;font-size:15px;flex-wrap:wrap}
.nav a{color:var(--ink-soft);padding:6px 12px;border-radius:3px;font-variation-settings:"wght" 400}
.nav a:hover{background:var(--sand);text-decoration:none}
.nav a[aria-current]{background:var(--rubrik);color:#fff;font-variation-settings:"wght" 500}
.rubrikband{background:var(--rubrik);color:#fff;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-variation-settings:"wght" 500}
.rubrikband .wrap{padding-top:9px;padding-bottom:9px}

.crumb{font-size:14px;color:var(--muted);padding:22px 0 0}
.crumb a{color:var(--muted)}
.head{padding:10px 0 28px;border-bottom:1px solid var(--rule);margin-bottom:32px}
.head h1{font-size:clamp(38px,7vw,92px);color:var(--rubrik);overflow-wrap:break-word}
.head .tagline{font-size:17px;color:var(--muted);margin-top:10px}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:52px;align-items:start;padding-bottom:44px}

/* Direktantwort */
.answer{background:var(--rubrik);color:#fff;padding:26px 30px;position:relative;border-radius:3px 3px 0 0}
.answer::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background-color:var(--safran);
  background-image:radial-gradient(circle at 50% 50%,var(--c-hist) 1.7px,transparent 1.9px);background-size:8px 8px}
.answer .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#C3D3EA;
  font-variation-settings:"wght" 600;margin-bottom:10px}
.answer p{margin:0;font-family:'Instrument',serif;font-size:clamp(20px,4.6vw,26px);
  line-height:1.35;color:#fff;max-width:none;overflow-wrap:break-word}
.answer b{font-weight:400;color:var(--safran)}

.toc{margin:34px 0 6px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;
  border-bottom:1px solid var(--rule);padding-bottom:12px}
.toc .lbl{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wght" 600}
.toc a{color:var(--ink-soft);font-size:15.5px}

h2{font-size:clamp(30px,4vw,40px);margin:46px 0 12px;scroll-margin-top:16px}
h2 .n{font-family:'Outfit',sans-serif;font-size:14px;letter-spacing:.14em;display:block;
  margin-bottom:8px;font-variation-settings:"wght" 600;text-transform:uppercase}
h2.meer,h2.meer .n{color:var(--c-meer)}
h2.hist,h2.hist .n{color:var(--c-hist)}
h2.land,h2.land .n{color:var(--c-land)}
h2.kueche,h2.kueche .n{color:var(--c-kueche)}
h2.raetsel,h2.raetsel .n{color:var(--c-raetsel)}
p{margin:0 0 15px;max-width:68ch;color:var(--ink-soft)}
.lead{font-size:18px;color:var(--ink)}
.lead::first-letter{font-family:'Instrument',serif;font-size:66px;line-height:.78;float:left;
  margin:8px 12px 0 0;color:var(--safran)}

/* Kennzahlen */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0;
  margin:26px 0 30px;border-top:1px solid var(--rule)}
.quick > div{padding:18px 20px 18px 0;border-right:1px solid var(--rule)}
.quick > div:last-child{border-right:0}
.quick .v{font-family:'Instrument',serif;font-size:44px;line-height:1;letter-spacing:-.02em}
.quick > div:nth-child(1) .v{color:var(--c-meer)} .quick > div:nth-child(2) .v{color:var(--c-land)}
.quick > div:nth-child(3) .v{color:var(--c-hist)} .quick > div:nth-child(4) .v{color:var(--c-kueche)}
.quick .k{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-top:9px;font-variation-settings:"wght" 500}

/* Datenpanels */
.panel{background:var(--paper2);border:1px solid var(--rule);border-radius:3px;margin:22px 0;overflow:hidden}
.panel .ph{display:flex;align-items:baseline;gap:10px;padding:13px 20px;
  border-bottom:1px solid var(--rule);background:var(--sand);flex-wrap:wrap}
.panel .ph b{font-family:'Instrument',serif;font-weight:400;font-size:21px}
.panel .ph span{font-size:12.5px;color:var(--muted);margin-left:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid2 > div{padding:13px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.grid2 > div:last-child{border-right:0}
.grid2 .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wght" 500}
.grid2 .v{font-size:17.5px;margin-top:3px;font-variation-settings:"wght" 500}
.grid2 .v em{font-style:normal;color:var(--muted);font-size:14.5px;font-variation-settings:"wght" 350}

/* Groessenvergleich */
.cmp{padding:16px 20px 18px}
.cmp .line{margin-bottom:15px}
.cmp .line:last-child{margin-bottom:0}
.cmp .lbl{font-size:14.5px;color:var(--ink-soft);margin-bottom:6px}
.cmp .lbl b{font-variation-settings:"wght" 600;color:var(--ink)}
.cmp .bar{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cmp .bar i{height:13px;border-radius:2px;display:block;min-width:2px}
.cmp .bar span{font-size:13px;color:var(--muted)}
.cmp .a i{background:var(--c-hist)} .cmp .b i{background:var(--c-land)}

/* Sonne */
.sun{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.sun > div{padding:14px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;gap:11px;align-items:flex-start}
.sun > div:last-child{border-right:0}
.sun .ic{flex:none;width:22px;height:22px;margin-top:2px}
.sun .k{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wght" 500}
.sun .v{font-size:17px;margin-top:2px;font-variation-settings:"wght" 500}
.sun .v em{font-style:normal;color:var(--muted);font-size:14px;font-variation-settings:"wght" 350}

/* Tabelle */
table{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:16px}
th{text-align:left;padding:11px 14px 11px 0;border-bottom:2px solid var(--rubrik);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rubrik);
  font-variation-settings:"wght" 600}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'Instrument',serif;font-size:19px}
tbody tr:hover{background:var(--sand)}
.tab-wrap{overflow-x:auto}

/* FAQ */
.faq .q{border-top:1px solid var(--rule);padding:16px 0}
.faq .q b{display:block;font-family:'Instrument',serif;font-weight:400;font-size:23px;margin-bottom:5px}
.faq .q span{color:var(--ink-soft);font-size:16px}

/* Raetsel-Querverweis */
.riddle{margin-top:36px;background:var(--c-raetsel-t);border-left:5px solid var(--c-raetsel);
  border-radius:0 3px 3px 0;padding:24px 26px}
.riddle b{font-family:'Instrument',serif;font-weight:400;font-size:25px;display:block;
  margin-bottom:13px;color:var(--c-raetsel)}
.riddle .w{display:flex;flex-wrap:wrap;gap:9px}
.riddle .w a{background:var(--paper2);border:1px solid #D3CBE4;color:var(--c-raetsel);
  padding:6px 14px;font-size:15px;letter-spacing:.08em;border-radius:3px;font-variation-settings:"wght" 500}
.riddle .w a:hover{background:var(--c-raetsel);color:#fff;border-color:var(--c-raetsel);text-decoration:none}

/* Infobox */
.ibox{background:var(--paper2);border:1px solid var(--rule);border-radius:3px;
  position:sticky;top:18px;overflow:hidden}
.ibox .ih{background:var(--c-hist);color:#fff;padding:16px 20px}
.ibox .ih b{font-family:'Instrument',serif;font-weight:400;font-size:26px;display:block}
.ibox .ih span{font-size:13.5px;color:#F6D6C9}
.ibox .row{display:flex;justify-content:space-between;gap:12px;padding:10px 20px;
  border-bottom:1px solid var(--rule);font-size:15px}
.ibox .row:last-of-type{border-bottom:0}
.ibox .row > span{color:var(--muted)}
.ibox .row b{text-align:right;font-variation-settings:"wght" 500}
.ibox .foot{background:var(--sand);padding:12px 20px;font-size:13px;color:var(--muted)}

/* Verwandtes */
.rel{border-top:1px solid var(--rule);padding:28px 0 66px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
.rel a{padding:20px 22px 20px 0;border-right:1px solid var(--rule);color:var(--ink)}
.rel a:last-child{border-right:0}
.rel .t{font-family:'Instrument',serif;font-size:22px}
.rel .d{font-size:14px;color:var(--muted);margin-top:3px}
.rel a:nth-child(1) .t{color:var(--c-meer)} .rel a:nth-child(2) .t{color:var(--c-land)}
.rel a:nth-child(3) .t{color:var(--c-hist)} .rel a:nth-child(4) .t{color:var(--c-kueche)}
.rel a:hover{text-decoration:none} .rel a:hover .t{text-decoration:underline;text-underline-offset:3px}

/* Fuss */
.foot{background:var(--sand);border-top:1px solid var(--rule);padding:30px 0 40px;
  font-size:14px;color:var(--muted)}
.foot a{color:var(--ink-soft)}
.foot .quellen{margin-top:10px;font-size:13px}

@media(max-width:600px){
  .wrap{padding:0 18px}
  .cmp .bar{flex-wrap:wrap;gap:4px}
  .cmp .bar i{width:100%!important}
}
@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:32px}
  .ibox{position:static}
  .nav{margin-left:0;width:100%;padding-bottom:10px}
  .quick > div,.grid2 > div,.sun > div,.rel a{border-right:0;border-bottom:1px solid var(--rule)}
  .lead::first-letter{font-size:52px}
}

/* Rechtstexte */
.legal{padding:34px 0 60px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(38px,6vw,64px);color:var(--rubrik);margin-bottom:8px}
.legal .updated{color:var(--muted);font-size:14.5px;margin:0 0 30px}
.legal h2{font-family:'Instrument',serif;font-size:26px;margin:34px 0 10px;color:var(--ink)}
.legal p,.legal li{max-width:68ch;color:var(--ink-soft)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin:0 0 6px}
.legal address{font-style:normal;line-height:1.8}
.legal .box{background:var(--paper2);border:1px solid var(--rule);border-radius:3px;
  padding:16px 20px;margin:10px 0 18px}

/* Mittelmeer-Lagekarte (inc/karte.php) */
.medkarte{width:100%;height:auto;display:block;background:var(--c-meer-t)}
.mk-meer{fill:var(--c-meer-t)}
.mk-land path{fill:var(--sand);stroke:#D9CDB2;stroke-width:.8;vector-effect:non-scaling-stroke}
.mk-halo{fill:var(--c-hist);opacity:.22}
.mk-dot{fill:var(--c-hist);stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke}
.mk-dot-klein{fill:var(--c-meer);opacity:.55}
.ibox .medkarte{border-bottom:1px solid var(--rule)}

/* Illustrationen */
figure.illu{margin:26px 0}
figure.illu img{width:100%;height:auto;border-radius:3px;border:1px solid var(--rule)}
figure.illu figcaption{font-size:14px;color:var(--muted);margin-top:9px;font-style:italic}
.hero-illu{margin:0 0 32px}
.hero-illu img{width:100%;height:auto;border-radius:3px}

/* Kreuzwortraetsel-Loesungen */
.loesungen{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}
.loesungen a,.loesungen span{background:var(--paper2);border:1px solid var(--rule);
  padding:6px 13px;border-radius:3px;font-size:15.5px;letter-spacing:.09em;
  font-variation-settings:"wght" 500;color:var(--ink)}
.loesungen a{border-color:#D3CBE4;color:var(--c-raetsel)}
.loesungen a:hover{background:var(--c-raetsel);color:#fff;border-color:var(--c-raetsel);
  text-decoration:none}

/* ---------------------------------------------------------------
   Fehlerseite: Echolot-Ping und aufsteigende Luftblasen.
   Nur auf /404.php, deshalb an .tiefe gebunden. Reines CSS, animiert
   werden ausschliesslich transform und opacity.
   --------------------------------------------------------------- */

/* Echolot: der Halo am Marker laeuft nach aussen, wie ein Sonar-Ping.
   Das Calypsotief wurde per Echolot vermessen - daher das Motiv. */
.tiefe .mk-halo{transform-box:fill-box;transform-origin:center;
  animation:ping 3.4s cubic-bezier(.16,1,.3,1) infinite}
.tiefe .mk-dot{transform-box:fill-box;transform-origin:center;
  animation:blip 3.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes ping{
  0%{transform:scale(.35);opacity:.55}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
@keyframes blip{
  0%,60%,100%{transform:scale(1)}
  8%{transform:scale(1.35)}
}

/* Luftblasen im Antwortkasten. Eigener Layer, damit die Kachelkante
   unter dem Kasten (.answer::after) nicht weggeschnitten wird. */
.blasen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  border-radius:3px 3px 0 0}
.blasen i{position:absolute;bottom:-14px;display:block;border-radius:50%;
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);
  animation:steigen linear infinite}
@keyframes steigen{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:1}
  80%{opacity:.65}
  100%{transform:translateY(-260px) translateX(14px);opacity:0}
}
.answer .lbl,.answer p{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){
  .tiefe .mk-halo,.tiefe .mk-dot,.blasen i{animation:none}
  .blasen{display:none}
}

/* Klimadiagramm nach Walter/Lieth (inc/klima.php) */
.klimadiagramm{width:100%;height:auto;display:block;background:var(--paper2)}
.kd-gitter{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.kd-regen{fill:var(--c-meer);opacity:.72}
.kd-band{fill:var(--c-kueche);opacity:.16}
.kd-temp{fill:none;stroke:var(--c-hist);stroke-width:2.6;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.kd-achse,.kd-monat,.kd-legende{font-family:'Outfit',sans-serif;fill:var(--muted)}
.kd-achse{font-size:13px}
.kd-monat{font-size:14px;text-anchor:middle;fill:var(--ink-soft)}
.kd-legende{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.kd-links{text-anchor:end}
.kd-rechts{text-anchor:start}
.klima-legende{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0 0;font-size:14px;color:var(--muted)}
.klima-achsen{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:10px 20px 0}
.klima-legende span{display:flex;align-items:center;gap:7px}
.klima-legende i{width:16px;height:11px;border-radius:2px;display:block}
.kl-temp{background:var(--c-hist)} .kl-regen{background:var(--c-meer);opacity:.72}
.kl-band{background:var(--c-kueche);opacity:.4}