/* Blog-Kopf: Aussehen der Tastenhilfe fuer alle Blogseiten (Logik: blog-kopf.js, eingebunden von scripts/rahmen.py). */
/* Tastenhilfe im Kopf (17.10.2026): Pfeiltasten wie auf der Tastatur (umgekehrtes T) links neben dem Suchfeld, klickbar.
   Artikelseiten: nur beim Ueberfahren des Kopfes; Uebersicht (.fest): immer, unten buendig mit dem Suchfeld.
   Ueber den Tasten erklaert eine kleine Info-Blase die Pfeiltasten. Am Handy und ohne Maus ausgeblendet. */
/* Lage auf ALLEN Blogseiten gleich (Wunsch 17.10.2026): unten buendig mit dem Suchfeld, links davon */
.qodef-title .tasten-hilfe { position: absolute; right: calc(100% + 98px); top: auto; bottom: 0; transform: none; display: block;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.qodef-title .th-tasten { position: relative; display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: 36px 36px; gap: 5px; }
.qodef-title .th-taste { display: grid; place-items: center; font-style: normal; font-size: 11px; line-height: 1; color: rgba(255,255,255,.95); cursor: pointer;
  background: linear-gradient(180deg, rgba(40,40,44,.72), rgba(14,14,16,.72)); border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.4); transition: background .15s, border-color .15s; }
.qodef-title .th-taste:hover { background: linear-gradient(180deg, rgba(70,70,76,.8), rgba(30,30,34,.8)); border-color: rgba(255,255,255,.55); }
.qodef-title .th-taste:active { transform: translateY(1px); }
.qodef-title .th-taste.th-aus { cursor: default; }   /* gleich hell wie die anderen (Wunsch 17.10.2026) */
.qodef-title .th-hoch { grid-column: 2; grid-row: 1; } .qodef-title .th-links { grid-column: 1; grid-row: 2; }
.qodef-title .th-runter { grid-column: 2; grid-row: 2; } .qodef-title .th-rechts { grid-column: 3; grid-row: 2; }
.qodef-title .th-info { position: absolute; left: 0; right: auto; bottom: calc(100% + 10px); width: 290px; padding: 10px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; font-weight: 400; color: #fff; white-space: normal; text-align: left;
  background: #1d1d21; border: 1px solid #3a3a40; box-shadow: 0 8px 22px rgba(0,0,0,.45);   /* undurchsichtig (Wunsch 17.10.2026) */
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 5; pointer-events: none; }
.qodef-title .th-info::after { content: ""; position: absolute; left: 47px; top: 100%; border: 7px solid transparent; border-top-color: #1d1d21; }
/* Artikelseiten: der Titel steht darueber, darum oeffnet das Infofeld rechts neben den Tasten (ueber dem Suchfeld) */
.qodef-title .tasten-hilfe:not(.fest) .th-info { left: calc(100% + 14px); bottom: 0; transform: translateX(-4px); }
.qodef-title .tasten-hilfe:not(.fest) .th-tasten:hover .th-info { transform: none; }
.qodef-title .tasten-hilfe:not(.fest) .th-info::after { left: auto; right: 100%; top: auto; bottom: 14px; border-top-color: transparent; border-right-color: #1d1d21; }
.qodef-title .th-info b { font-weight: 600; white-space: nowrap; }
.qodef-title .th-tasten:hover .th-info { opacity: 1; visibility: visible; transform: none; }
.qodef-title:hover .tasten-hilfe, .qodef-title .tasten-hilfe.fest { opacity: 1; pointer-events: auto; }
@media (min-width: 1240px) { .qodef-title .tasten-hilfe { right: calc(100% + 174px); } }   /* 2 cm weiter links, wo Platz ist */
@media (max-width: 1140px) { .qodef-title .th-tasten { grid-template-columns: repeat(3, 30px); grid-template-rows: 30px 30px; gap: 4px; }
  .qodef-title .tasten-hilfe { right: calc(100% + 48px); }   /* links steht der Untertitel */
}
/* Eine Reihe ◀ ▲ ▼ ▶, wenn das T an Titel oder Untertitel stoesst (setzt blog-kopf.js); "nah": dicht ans Suchfeld */
.qodef-title .tasten-hilfe.einreihig .th-tasten { grid-template-rows: auto; grid-template-columns: repeat(4, auto); }
.qodef-title .tasten-hilfe.einreihig .th-links { grid-column: 1; grid-row: 1; } .qodef-title .tasten-hilfe.einreihig .th-hoch { grid-column: 2; grid-row: 1; }
.qodef-title .tasten-hilfe.einreihig .th-runter { grid-column: 3; grid-row: 1; } .qodef-title .tasten-hilfe.einreihig .th-rechts { grid-column: 4; grid-row: 1; }
.qodef-title .th-tasten > .th-taste { width: 36px; height: 36px; }
@media (max-width: 1140px) { .qodef-title .th-tasten > .th-taste { width: 30px; height: 30px; } }
.qodef-title .tasten-hilfe.nah { right: calc(100% + 14px) !important; }
@media (max-width: 768px), (hover: none) { .qodef-title .tasten-hilfe { display: none; } }
/* Sprachmenue: seit 18.10.2026 seitenweit in /mobil.css */

/* Scrabble-Steine und Lesetipp im Kopf (19.10.2026; Logik: blog-kopf.js, Auswahl: scripts/rahmen.py kopf_auswahl) */
.qodef-title.mit-steinen h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; }
/* Abdunkeln ueber dem Foto (helle Fotos wie Geldscheine), unter Titel, Steinen, Suche und Lesetipp */
.page-id-blog .qodef-title { position: relative; }
.page-id-blog .qodef-title::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,20,.74) 0%, rgba(8,12,20,.46) 55%, rgba(8,12,20,.36) 100%),
              linear-gradient(0deg, rgba(8,12,20,.45), transparent 50%); }
.page-id-blog .qodef-title .qodef-title-holder { z-index: 2; }
/* langer Titel (Fahrplan) laeuft nicht unter den Lesetipp */
.page-id-blog .qodef-title.mit-tipp h1 { max-width: calc(100% - 420px) !important; }
.kopf-steine { --t: 54px; position: relative; display: block; width: calc(var(--spalten) * var(--t) * 1.08); height: calc(var(--zeilen) * var(--t) * 1.08);
  margin: 0 0 12px; cursor: pointer; }
.kopf-steine.gekreuzt { --t: 40px; }
.kopf-steine.klein { --t: 32px; margin-bottom: 10px; }
.kopf-steine.klein.mittel { --t: 42px; margin-bottom: 12px; }   /* Fahrplan-Hauptseiten */
.kopf-stein { position: absolute; left: calc(var(--x) * var(--t) * 1.08); top: calc(var(--y) * var(--t) * 1.08);
  width: var(--t); height: var(--t); border-radius: 6px; user-select: none;
  background: linear-gradient(155deg, #f8edd3, #efe0b9 55%, #dcc694);
  box-shadow: inset 0 -3px 0 #b99b5e, inset 0 1px 0 rgba(255,255,255,.6), 1px 2px 2px rgba(0,0,0,.55), 8px 11px 16px rgba(0,0,0,.45);
  color: #2a2117; font: 700 calc(var(--t) * .56)/var(--t) "Roboto Slab", Georgia, "Times New Roman", serif; text-align: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform .45s cubic-bezier(.25,1.4,.5,1);
  animation: kopf-stein-rein .55s cubic-bezier(.25,1.3,.5,1) both; }
.kopf-stein small { position: absolute; right: 5px; bottom: 3px; font: 600 calc(var(--t) * .2)/1 "Roboto Slab", Georgia, serif; }
.kopf-stein:hover { transform: translate(var(--dx), calc(var(--dy) - 6px)) rotate(calc(var(--r) * -1)); }
@keyframes kopf-stein-rein { from { opacity: 0; transform: translate(var(--dx), calc(var(--dy) - 26px)) rotate(calc(var(--r) * 3)); } }
.kopf-tipp { position: absolute; right: 0; top: -6px; width: 360px; max-width: 40%; display: block; padding: 12px 15px 13px; border-radius: 10px;
  background: rgba(12,16,24,.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.35); color: #fff !important; text-decoration: none !important; transition: transform .2s, border-color .2s; }
.kopf-tipp:hover { transform: translateY(-3px); border-color: rgba(255,207,122,.75); }
.kopf-tipp .kt-kl { display: block; font: 600 11px/1.3 Raleway, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffcf7a; }
.kopf-tipp .kt-ti { display: block; font: 700 17px/1.3 Raleway, sans-serif; margin: 4px 0 5px; text-wrap: balance; color: #fff; }
.kopf-tipp .kt-me { display: block; font: 400 13px/1.4 Raleway, sans-serif; opacity: .82; color: #fff; }
.qodef-title-subtitle-holder-inner { position: relative; }
@media (max-width: 900px) { .kopf-tipp { max-width: 46%; } .kopf-tipp .kt-ti { font-size: 15px; } }
@media (max-width: 640px) {
  .page-id-blog .qodef-title.mit-tipp h1 { max-width: none !important; }
  .kopf-steine { --t: 40px; } .kopf-steine.gekreuzt { --t: 32px; } .kopf-steine.klein { --t: 28px; } .kopf-steine.klein.mittel { --t: 34px; }
  .kopf-tipp { position: static; width: auto; max-width: none; margin: 12px 0 4px; padding: 9px 12px; }
  .kopf-tipp .kt-ti { font-size: 15px; } .kopf-tipp .kt-me { font-size: 12px; }
}
/* Startseite (Wunsch 19.10.2026): jeder Stein faellt in der Mitte des Kopfs herunter und huepft dann in drei immer
   kleineren Spruengen nach links an seinen Platz (boing, boing, boing). --ox setzt blog-kopf.js: Abstand zur Mitte. */
.kopf-steine.huepfen .kopf-stein { --ox: 0px; animation: kopf-stein-huepfen 1.9s linear both; }
@keyframes kopf-stein-huepfen {
  0%   { opacity: 0; transform: translate(calc(var(--dx) + var(--ox)), -170px) rotate(calc(var(--r) * 3));
         animation-timing-function: cubic-bezier(.55,0,1,.45); }
  6%   { opacity: 1; }
  20%  { transform: translate(calc(var(--dx) + var(--ox)), var(--dy)) rotate(var(--r)) scale(1.08, .88);
         animation-timing-function: cubic-bezier(0,.55,.45,1); }
  36%  { transform: translate(calc(var(--dx) + var(--ox) * .66), calc(var(--dy) - 58px)) rotate(calc(var(--r) - 14deg));
         animation-timing-function: cubic-bezier(.55,0,1,.45); }
  52%  { transform: translate(calc(var(--dx) + var(--ox) * .34), var(--dy)) rotate(var(--r)) scale(1.06, .9);
         animation-timing-function: cubic-bezier(0,.55,.45,1); }
  64%  { transform: translate(calc(var(--dx) + var(--ox) * .14), calc(var(--dy) - 30px)) rotate(calc(var(--r) - 8deg));
         animation-timing-function: cubic-bezier(.55,0,1,.45); }
  76%  { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.04, .94);
         animation-timing-function: cubic-bezier(0,.55,.45,1); }
  85%  { transform: translate(var(--dx), calc(var(--dy) - 10px)) rotate(calc(var(--r) - 3deg));
         animation-timing-function: cubic-bezier(.55,0,1,.45); }
  93%  { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.02, .98); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .kopf-stein, .kopf-steine.huepfen .kopf-stein { animation: none; transition: none; } }
/* Artikelfotos (1280x672) im Breitformat des alten Kopfbilds (1920x400) zeigen: der Kopf folgt dem Bildformat und waere
   sonst 756 px hoch; der Ausschnitt um 38 % laesst die eingebrannte Wortmarke oben/unten im Foto draussen (19.10.2026) */
.page-id-blog .qodef-title .qodef-title-image img { aspect-ratio: 1920 / 400; height: auto !important; object-fit: cover; object-position: center 38%; }

/* Suchfeld so breit wie der Lesetipp darueber, rechte Kanten buendig (Wunsch 19.10.2026) */
@media (min-width: 769px) {
  .qodef-title.mit-tipp .kn-su-feld { width: 360px !important; max-width: 360px !important; }
  .kopf-tipp { width: 360px; max-width: none; box-sizing: border-box; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .qodef-title.mit-tipp .kn-su-feld { width: 320px !important; max-width: 320px !important; }
  .kopf-tipp { width: 320px; box-sizing: border-box; }
}

/* Slogan-Karten zwischen den Artikeln (19.10.2026; Texte data/slogans.json, Einbau scripts/rahmen.py slogans_einfuegen).
   Fuenf Formen reihum, damit es nicht wie ein Slider aus gleichen Kacheln wirkt; beim Scrollen springen sie herein. */
.slogan-karte { position: relative; display: flex; min-height: 250px; margin: 8px 0 34px; border-radius: 10px; overflow: hidden;
  color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.28); isolation: isolate; }
.slogan-karte .sl-bild { position: absolute; inset: 0; z-index: -2; background: var(--bild) center/cover; transition: transform 6s ease; }
.slogan-karte:hover .sl-bild { transform: scale(1.06); }
.slogan-karte .sl-text { margin: 0; font: 800 clamp(22px, 2.3vw, 30px)/1.25 Raleway, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.slogan-karte .sl-foto { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,.65); }
/* 1 Plakat: Foto vollflaechig, Schrift unten links, roter Balken */
.sl-plakat { align-items: flex-end; padding: 28px 30px 34px; }
.sl-plakat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,14,.88), rgba(10,10,14,.5) 55%, rgba(10,10,14,.1)); }
.sl-plakat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #e3262c; }
.sl-plakat .sl-text { max-width: 34ch; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* 2 Zweiteilung: links schwarze Flaeche mit grosser Schrift, rechts das Foto */
.sl-split { background: #0d0d10; }
.sl-split .sl-bild { left: 52%; }
.sl-split .sl-bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d0d10, transparent 35%); }
.sl-split .sl-text { position: relative; width: 52%; padding: 30px 28px; align-self: center; font-size: clamp(21px, 2.1vw, 27px); }
.sl-split .sl-text::first-line { color: #ffcf3a; }
/* 3 Schlagzeile: Zeitungspapier, Foto schwarzweiss als Spalte */
.sl-zeitung { background: #f3efe6; color: #141414; border: 1px solid #d8d0bf; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.sl-zeitung .sl-bild { left: auto; width: 38%; filter: grayscale(1) contrast(1.15); }
.sl-zeitung .sl-text { width: 62%; padding: 26px 28px 30px; align-self: center; font: 900 clamp(22px, 2.4vw, 31px)/1.18 "Playfair Display", Georgia, serif; color: #141414; }
.sl-zeitung::before { content: "EILMELDUNG"; position: absolute; left: 28px; top: 12px; font: 800 11px/1 Raleway, sans-serif; letter-spacing: .2em; color: #c8102e; }
.sl-zeitung .sl-foto { color: rgba(255,255,255,.8); }
/* 4 Warnband: gelb-schwarze Streifen oben und unten */
.sl-warnung { align-items: center; padding: 44px 30px; }
.sl-warnung::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,10,.72); }
.sl-warnung::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 16px solid; border-bottom: 16px solid; border-image: repeating-linear-gradient(-45deg, #ffcf00 0 18px, #111 18px 36px) 16; }
.sl-warnung .sl-text { max-width: 36ch; color: #ffcf00; text-transform: uppercase; font-size: clamp(19px, 2vw, 25px); letter-spacing: .01em; }
/* 5 Stempel: Foto, Schrift oben, schraeger roter Stempel */
.sl-stempel { position: absolute; right: 26px; bottom: 30px; transform: rotate(-12deg); font: 900 26px/1 "Black Ops One", Raleway, sans-serif; color: #ff3b3b;
  border: 5px solid #ff3b3b; border-radius: 8px; padding: 6px 14px; text-transform: uppercase; letter-spacing: .06em; background: rgba(0,0,0,.35); }
.sl-stempel-karte, .sl-stempel { }
.slogan-karte.sl-stempel { align-items: flex-start; padding: 28px 30px 70px; }
.slogan-karte.sl-stempel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,14,.85), rgba(10,10,14,.35)); }
.slogan-karte.sl-stempel .sl-text { max-width: 30ch; }
/* Hereinspringen beim Scrollen (setzt blog-kopf.js) */
.slogan-karte.sl-wartet { opacity: 0; transform: translateY(40px) rotate(-1.5deg) scale(.97); }
.slogan-karte.sl-da { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,1.4,.4,1); }
@media (max-width: 640px) {
  .slogan-karte { min-height: 210px; }
  .sl-split .sl-bild { left: 0; opacity: .35; } .sl-split .sl-text { width: 100%; }
  .sl-zeitung .sl-bild { width: 100%; opacity: .18; } .sl-zeitung .sl-text { width: 100%; }
  .slogan-karte .sl-text { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .slogan-karte.sl-wartet { opacity: 1; transform: none; } .slogan-karte .sl-bild { transition: none; } }