/**
 * my-fish Theme: Grundbausteine, Kopf und Fuß nach Entwurf V11.
 * Farben, Schriften, Schriftgrößen, Abstände und Schatten kommen aus theme.json
 * und stehen hier nur unter kurzen Namen. Radien tragen den Presetwert als Rückfall.
 */

/* ---------- Kurznamen ---------- */

:root {
	--petrol-950: var(--wp--preset--color--petrol-950);
	--petrol-900: var(--wp--preset--color--petrol-900);
	--petrol-800: var(--wp--preset--color--petrol-800);
	--petrol-700: var(--wp--preset--color--petrol-700);
	--petrol-600: var(--wp--preset--color--petrol-600);
	--petrol-500: var(--wp--preset--color--petrol-500);
	--petrol-400: var(--wp--preset--color--petrol-400);
	--petrol-300: var(--wp--preset--color--petrol-300);
	--petrol-200: var(--wp--preset--color--petrol-200);
	--petrol-100: var(--wp--preset--color--petrol-100);
	--petrol-50: var(--wp--preset--color--petrol-50);
	--ink-950: var(--wp--preset--color--ink-950);
	--stone-300: var(--wp--preset--color--stone-300);
	--stone-200: var(--wp--preset--color--stone-200);
	--stone-100: var(--wp--preset--color--stone-100);
	--stone-50: var(--wp--preset--color--stone-50);
	--paper: var(--wp--preset--color--paper);
	--coral-600: var(--wp--preset--color--coral-600);
	--coral-50: var(--wp--preset--color--coral-50);
	--moss-600: var(--wp--preset--color--moss-600);
	--moss-50: var(--wp--preset--color--moss-50);
	--ocker-600: var(--wp--preset--color--ocker-600);
	--ocker-50: var(--wp--preset--color--ocker-50);
	--s-1: var(--wp--preset--spacing--s-1);
	--s-2: var(--wp--preset--spacing--s-2);
	--s-3: var(--wp--preset--spacing--s-3);
	--s-4: var(--wp--preset--spacing--s-4);
	--s-5: var(--wp--preset--spacing--s-5);
	--s-6: var(--wp--preset--spacing--s-6);
	--s-7: var(--wp--preset--spacing--s-7);
	--s-8: var(--wp--preset--spacing--s-8);
	--s-9: var(--wp--preset--spacing--s-9);
	--s-10: var(--wp--preset--spacing--s-10);
	--s-11: var(--wp--preset--spacing--s-11);
	--s-12: var(--wp--preset--spacing--s-12);
	--r-sm: var(--wp--preset--border-radius--sm, 6px);
	--r-md: var(--wp--preset--border-radius--md, 10px);
	--r-lg: var(--wp--preset--border-radius--lg, 16px);
	--r-full: var(--wp--preset--border-radius--full, 999px);
	--shadow-1: var(--wp--preset--shadow--ruhe);
	--shadow-2: var(--wp--preset--shadow--hover);
	--shadow-3: var(--wp--preset--shadow--hoch);
	--font-display: var(--wp--preset--font-family--outfit);
	--font-text: var(--wp--preset--font-family--figtree);
	--line: 1px solid var(--stone-200);
	--ease-out: cubic-bezier(.16,1,.3,1);
	--w-page: 1440px;
	/* Seitenrand, auch als Root-Padding in theme.json genutzt */
	--pad-page: var(--s-8);
}

/* ---------- Seitengerüst: eine Kante von 1440px, Papier auf Stein ---------- */

.wp-site-blocks { max-width:var(--w-page);margin:0 auto;padding:0;position:relative;background:var(--paper);box-shadow:0 0 40px rgba(11,37,48,.07); }
.wp-site-blocks > * { margin-block-start:0; }
/* Der Wrapper des Kopf-Template-Parts darf den Sticky-Kopf nicht einsperren. */
.wp-site-blocks > .kopfbereich { display:contents; }

*,*::before,*::after { box-sizing:border-box; }
p { text-wrap:pretty; }
h1,h2,h3,h4 { text-wrap:balance; }

/* ---------- Schriftklassen aus DESIGN.md 3.3, Größen fließend aus theme.json ---------- */

.t-rubrik { font-family:var(--font-display);font-weight:500;font-size:var(--wp--preset--font-size--rubrik);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin:0;text-wrap:balance; }
.t-aufmacher { font-family:var(--font-display);font-weight:500;font-size:var(--wp--preset--font-size--aufmacher);line-height:1.17;margin:0;text-wrap:balance; }
.t-artikel { font-family:var(--font-display);font-weight:500;font-size:var(--wp--preset--font-size--artikel);line-height:1.25;margin:0;text-wrap:balance; }
.t-karte { font-family:var(--font-display);font-weight:500;font-size:var(--wp--preset--font-size--karte);line-height:1.25;margin:0;text-wrap:balance; }
.t-unterzeile { font-size:var(--wp--preset--font-size--unterzeile);line-height:1.33;font-weight:300;margin:0; }
.t-zeile { font-family:var(--font-display);font-weight:500;font-size:var(--wp--preset--font-size--zeile);line-height:1.3;margin:0;text-wrap:balance; }
.t-body { font-size:var(--wp--preset--font-size--body);line-height:1.5;margin:0; }
.t-klein { font-size:var(--wp--preset--font-size--klein);line-height:1.47;margin:0; }
.t-kicker { font-size:var(--wp--preset--font-size--kicker);line-height:1.43;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600);margin:0; }
.t-datum { font-size:var(--wp--preset--font-size--kicker);line-height:1.43;font-weight:600;color:var(--petrol-600);margin:0;font-variant-numeric:tabular-nums; }
.on-dark { color:var(--paper); }
.on-dark .t-kicker,.on-dark .t-datum,.on-dark .arrowlink { color:var(--petrol-200); }

/* ---------- Raster und Knöpfe ---------- */

.rail { padding-inline:var(--pad-page); }
.grid12 { display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-4); }

.btn { display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:600;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--petrol-600);color:var(--paper);border:1px solid var(--petrol-600);text-decoration:none;cursor:pointer;transition:background 120ms linear,border-color 120ms linear; }
.btn:hover { background:var(--petrol-700);border-color:var(--petrol-700); }
.btn--light { background:var(--paper);color:var(--petrol-700);border-color:var(--paper); }
.btn--light:hover { background:var(--petrol-100);border-color:var(--petrol-100); }
.btn--ghost { background:transparent;color:var(--paper);border-color:var(--petrol-500); }
.btn--ghost:hover { background:var(--petrol-700);border-color:var(--petrol-400); }
.btn--outline { background:transparent;color:var(--petrol-700);border-color:var(--stone-300); }
.btn--outline:hover { background:var(--petrol-50);border-color:var(--petrol-300); }
.btn--signal { background:var(--petrol-500);border-color:var(--petrol-500);color:var(--paper); }
.btn--signal:hover { background:var(--petrol-400);border-color:var(--petrol-400);color:var(--petrol-950); }
.btn--sm { padding:var(--s-2) var(--s-3);font-size:15px;line-height:22px; }

.arrowlink { display:inline-flex;align-items:center;gap:var(--s-2);font-size:15px;line-height:22px;font-weight:600;color:var(--petrol-700);text-decoration:none; }
.arrowlink:hover { text-decoration:underline;text-underline-offset:3px; }
.linklist { display:flex;flex-direction:column;gap:var(--s-2);margin:0;padding:0;list-style:none; }
.linklist a { font-size:16px;line-height:24px;text-decoration:none;display:inline-flex;gap:var(--s-2); }
.linklist a:hover { text-decoration:underline;text-underline-offset:3px; }
.linklist a::before { content:"→";color:var(--petrol-500); }

/* Kopf und Fuß erben die Textfarbe, Knöpfe behalten ihre eigene. */
.masthead a:not(.btn):not(.arrowlink),.foot a:not(.btn),.t-kicker a { color:inherit; }
.masthead img,.foot img { display:block;max-width:100%; }

/* ---------- Kopf ---------- */

.masthead { position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line); }
.admin-bar .masthead { top:32px; }

.masthead__top { position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s-7);height:112px;transition:height 240ms var(--ease-out),opacity 180ms linear; }
.masthead--kompakt .masthead__top { height:0;opacity:0;overflow:hidden;pointer-events:none; }
.masthead__deko { position:absolute;right:0;bottom:0;height:152px;width:auto;mix-blend-mode:multiply;pointer-events:none;user-select:none; }
.masthead__logo img { width:320px;height:auto; }
.masthead__logoklein { display:none; }
.masthead__logoklein img { display:block;width:150px;height:auto; }

.claim { position:relative;z-index:1;margin:0;justify-self:start;align-self:center;padding-left:var(--s-7);border-left:1px solid var(--stone-200);font-family:var(--font-display);font-weight:500;font-size:20px;line-height:26px;color:var(--ink-950);text-wrap:balance; }
.claim span { display:block;font-family:var(--font-text);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600);margin-bottom:var(--s-1); }

.masthead__bar { display:flex;align-items:center;gap:var(--s-6);height:56px;border-top:var(--line); }
.masthead__nav { display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s-5); }
.masthead__nav button,.masthead__nav a { font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:400;color:var(--ink-950);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-1);white-space:nowrap; }
.masthead__nav a:hover,.masthead__nav button:hover,.masthead__nav button[aria-expanded="true"],.masthead__nav a[aria-current] { color:var(--petrol-700); }
.masthead__nav [aria-current]:not(.navhome) { box-shadow:inset 0 -2px 0 var(--petrol-600);padding-bottom:2px; }
.navhome { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-md);color:var(--petrol-700); }
.navhome:hover { background:var(--petrol-50); }
.navhome[aria-current] { background:var(--petrol-100); }

.masthead__bar .masthead__tools { margin-left:auto;display:flex;align-items:center;gap:var(--s-4); }
.masthead__konto { font-size:15px;line-height:22px;font-weight:600;color:var(--petrol-700);text-decoration:none;display:inline-flex;align-items:center;gap:var(--s-2); }
.masthead__konto:hover { text-decoration:underline;text-underline-offset:3px; }

/* ---------- Mega-Menü ---------- */

.mega { display:none;position:absolute;left:0;right:0;top:100%;border-top:var(--line);background:var(--paper);box-shadow:var(--shadow-3); }
.mega.open { display:block;animation:mega-in 260ms var(--ease-out); }
.mega__inner { padding-block:var(--s-5) var(--s-4); }
.mega__col { grid-column:span 3;display:flex;flex-direction:column;gap:var(--s-2); }
.mega__col .t-kicker { margin-bottom:var(--s-2);padding-bottom:var(--s-2);border-bottom:var(--line); }
.mega__col .linklist a { padding-block:2px;transition:transform 120ms linear; }
.mega__col .linklist a:hover { transform:translateX(4px);text-decoration:none;color:var(--petrol-700); }
.mega__teaser { grid-column:span 3;display:flex;flex-direction:column;gap:var(--s-2); }
.mega__teaser .figure { height:140px;border-radius:var(--r-md);overflow:hidden; }
.mega__teaser .figure img { width:100%;height:100%;object-fit:cover;transition:transform 280ms var(--ease-out); }
.mega__teaser:hover .figure img { transform:scale(1.05); }
.mega__titel a { text-decoration:none; }
.mega__titel a:hover { text-decoration:underline;text-underline-offset:3px; }
.mega__foot { display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--line); }
.mega.open .mega__col,.mega.open .mega__teaser { animation:mega-col 360ms var(--ease-out) both; }
.mega.open .mega__col:nth-child(2) { animation-delay:60ms; }
.mega.open .mega__col:nth-child(3) { animation-delay:120ms; }
.mega.open .mega__teaser { animation-delay:180ms; }
@keyframes mega-in { from { opacity:0;transform:translateY(-10px); } to { opacity:1;transform:translateY(0); } }
@keyframes mega-col { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }

/* ---------- Suche ---------- */

.suchknopf { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:var(--r-full);background:none;color:var(--petrol-700);cursor:pointer; }
.suchknopf:hover,.suchknopf[aria-expanded="true"] { color:var(--petrol-500); }
.suchknopf:focus-visible { outline:2px solid var(--petrol-500);outline-offset:2px; }
.suchpanel { max-height:0;overflow:hidden;border-top:1px solid transparent;background:var(--stone-50);opacity:0;visibility:hidden;transition:max-height 300ms var(--ease-out),opacity 180ms linear,border-color 180ms linear,visibility 0s linear 300ms; }
.suchpanel.offen { max-height:160px;opacity:1;visibility:visible;border-top-color:var(--stone-200);transition:max-height 320ms var(--ease-out),opacity 180ms linear,border-color 180ms linear,visibility 0s; }
.search { position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center;margin:0;padding-block:var(--s-3);transform:translateY(-8px);transition:transform 320ms var(--ease-out); }
.suchpanel.offen .search { transform:none; }
.search input { font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:300;color:var(--ink-950);width:100%;height:40px;padding-left:var(--s-6);padding-right:var(--s-3);border:1px solid var(--stone-300);border-radius:var(--r-md);background:var(--paper); }
.search input::placeholder { color:var(--petrol-600); }
.search input:focus { outline:2px solid var(--petrol-500);outline-offset:1px; }
.search svg { position:absolute;left:calc(var(--pad-page) + 11px);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--petrol-600); }
.search .btn { height:40px;padding-inline:var(--s-4); }

/* ---------- Burger ---------- */

.burger { display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;width:44px;height:44px;border:1px solid var(--stone-300);border-radius:var(--r-md);background:var(--paper);cursor:pointer;padding:0; }
.burger span { display:block;width:20px;height:2px;background:var(--petrol-700);border-radius:2px;transition:transform 200ms ease-out,opacity 150ms linear; }
.burger:focus-visible { outline:2px solid var(--petrol-500);outline-offset:2px; }
.masthead--offen .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.masthead--offen .burger span:nth-child(2) { opacity:0; }
.masthead--offen .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Fuß ---------- */

.foot { background:var(--petrol-950);color:var(--paper);padding-block:var(--s-8) var(--s-6); }
.foot__grid { display:grid;grid-template-columns:360px repeat(4,minmax(0,1fr));gap:var(--s-6); }
.foot__brand { display:flex;flex-direction:column;gap:var(--s-4); }
.foot__brand img { width:280px;height:auto; }
.foot__col { display:flex;flex-direction:column;gap:var(--s-2); }
.foot__col a { font-size:15px;line-height:22px;text-decoration:none; }
.foot__col a:hover,.foot__mail:hover { text-decoration:underline;text-underline-offset:3px; }
.foot__col .t-kicker { color:var(--petrol-200);margin-bottom:var(--s-2); }
.foot__row { display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--petrol-800); }
.foot__traeger { display:flex;align-items:center;gap:var(--s-6); }
.foot__traeger .t-kicker { color:var(--petrol-200); }
.foot__traeger a { display:flex;align-items:center;opacity:.92;transition:opacity 120ms linear; }
.foot__traeger a:hover { opacity:1; }
.foot__traeger img { height:48px;width:auto; }
.foot__kontakt { display:flex;align-items:center;gap:var(--s-5); }
.foot__social { display:flex;flex-wrap:wrap;gap:var(--s-3); }
.foot__social a { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--petrol-800);border-radius:var(--r-full);color:var(--petrol-200);transition:background 120ms linear; }
.foot__social a:hover { background:var(--petrol-800);color:var(--paper);border-color:var(--petrol-700); }
.foot__mail { display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none; }
.foot__base { display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--petrol-800); }
.foot__base p { margin:0; }
.foot__base a { font-size:15px;line-height:22px; }
.foot__legal { display:flex;flex-wrap:wrap;gap:var(--s-4); }

/* ---------- Breiten ---------- */

@media (max-width:1340px) {
	:root { --pad-page: var(--s-5); }
	.masthead__logo img { width:240px; }
	.masthead__nav { gap:var(--s-4); }
	.masthead__bar .masthead__tools { gap:var(--s-3); }
	.claim { padding-left:var(--s-5);font-size:18px;line-height:24px; }
}

@media (max-width:1100px) {
	.masthead__deko { display:none; }
}

/* Die volle Menüleiste braucht rund 1.160 px; darunter Burger-Menü, sonst ragen Suche, Anmelden und
   Mitmachen über den Rand (gemessen 27.09.2026: 131 px bei 1.024 px Breite). */
@media (max-width:1180px) {
	.masthead__top { display:none; }
	.masthead__logoklein { display:block;order:0; }
	.masthead__bar { flex-wrap:wrap;height:auto;min-height:64px;gap:var(--s-3);padding-block:var(--s-2); }
	.masthead__bar .masthead__tools { order:1;gap:var(--s-2); }
	.masthead__konto,.masthead__tools .btn { display:none; }
	.burger { display:flex;order:2; }
	.masthead__nav { display:none;order:3;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 220px);overflow-y:auto;background:var(--paper);border-top:var(--line);padding:var(--s-2) 0 var(--s-3);margin-bottom:var(--s-2); }
	.masthead--offen { max-height:100dvh;overflow-y:auto;overscroll-behavior:contain; }
	.masthead--offen .masthead__nav { display:flex; }
	.masthead__nav a,.masthead__nav button { width:100%;justify-content:space-between;padding-block:var(--s-3);border-bottom:var(--line);font-size:18px;line-height:26px; }
	.masthead__nav .navhome { width:100%;justify-content:flex-start;border-radius:0;height:auto; }
	.mega { position:static;box-shadow:none;border-top:0;background:var(--stone-50);padding-inline:var(--pad-page); }
	.mega.open { animation:none; }
	.mega .rail { padding-inline:0; }
	.mega__inner { padding:var(--s-3) 0 var(--s-4); }
	.mega .grid12 { grid-template-columns:1fr;gap:var(--s-4); }
	.mega__col,.mega__teaser { grid-column:1 / -1; }
	.mega__teaser .figure { height:160px; }
	.mega__foot { flex-direction:column;align-items:flex-start;gap:var(--s-3); }
}

@media (max-width:900px) {
	:root { --pad-page: var(--s-4); }
	html,body { overflow-x:clip; }
	.grid12 { grid-template-columns:repeat(6,1fr); }
	.foot__grid { grid-template-columns:1fr 1fr;gap:var(--s-5); }
	.foot__brand { grid-column:1 / -1; }
	.foot__row { flex-wrap:wrap;gap:var(--s-4); }
}

@media (max-width:782px) {
	.admin-bar .masthead { top:46px; }
}

@media (max-width:640px) {
	:root { --pad-page: var(--s-3); }
	.masthead__logoklein img { width:132px; }
	.masthead__bar { min-height:56px; }
	.grid12 { grid-template-columns:1fr; }
	.foot__grid { grid-template-columns:1fr;gap:var(--s-4); }
	.foot__brand img { width:220px; }
	.foot__base { flex-direction:column;align-items:flex-start;gap:var(--s-3); }
	.foot__legal { gap:var(--s-3); }
	.foot__traeger { gap:var(--s-4); }
	.foot__kontakt { flex-wrap:wrap;gap:var(--s-3); }
}

@media (max-width:600px) {
	/* Die Admin-Leiste scrollt hier mit, der Kopf klebt ganz oben. */
	.admin-bar .masthead { top:0; }
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion:no-preference) {
	html { scroll-behavior:smooth; }
}

@media (prefers-reduced-motion:reduce) {
	.masthead__top,.suchpanel,.search,.mega__teaser .figure img { transition:none; }
	.search { transform:none; }
	.mega.open,.mega.open .mega__col,.mega.open .mega__teaser { animation:none; }
}

/* ---------- Nur für Screenreader ---------- */

.screen-reader-text { border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important; }

/* ---------- Links und dunkle Flächen ---------- */

/* Links erben die Textfarbe wie in V11. Blau sind nur Links im Fließtext. */
:where(.wp-block-post-content, .wp-block-post-excerpt, .wp-block-term-description, .wp-block-query-no-results) a:where(:not(.wp-element-button, .btn)) { color:var(--petrol-500); }
:where(.wp-block-post-content, .wp-block-post-excerpt, .wp-block-term-description, .wp-block-query-no-results) a:where(:not(.wp-element-button, .btn)):hover { color:var(--petrol-700); }
/* Auf dunklem Grund erben auch Überschriften das Weiß der Fläche. */
.on-dark :is(h1,h2,h3,h4,h5,h6) { color:inherit; }