/* ERZEUGTE DATEI - nicht hier editieren.
   Quelle: site/assets/css/css/mobile.css
   Neu erzeugen: python tools/sync_theme.py */
/* ==========================================================================
   Sozan Coskun - Portfolio, Mobile-Layout
   1:1 nach Sozan_Mobile_Webseite.pdf (Designbreite 360 px, Hoehe 8818 px).

   WICHTIG: Diese Datei wird mit media="(max-width: 1199px)" eingebunden und
   enthaelt deshalb selbst keine Media Query. Ohne dieses Attribut wuerde sie
   das Desktop-Layout ueberschreiben.

   Massstab: wie beim Desktop stehen alle Masse in Design-Pixeln und werden
   ueber --u skaliert. Hier ist die Basis 360 statt 1440.

   Die Spalte waechst bis 630 px mit und steht darueber zentriert. Der Deckel
   ist ein Kompromiss: das Desktop-Layout kann erst ab 1200 px greifen (dort
   ist sein Fliesstext bei 12 px angekommen, darunter wird er unlesbar), also
   muss das mobile Layout bis 1199 px tragen. Mit 630 statt 450 px bleiben auf
   einem Tablet 70 bis 285 px Rand statt 160 bis 375 - die Schrift waechst
   dabei auf 21 px mit.
   ========================================================================== */

:root {
  --u: min(calc(100vw / 360), 1.75px);
  --dot-pitch: calc(7 * var(--u));
}

/* Zwischen 360 und 450 px kann 100vw die Scrollbar mitzaehlen. Das sind
   wenige Pixel, die hier wegfallen statt eine Querscrollleiste zu erzeugen.
   clip statt hidden, damit position:sticky im Header weiter funktioniert. */
body { overflow-x: clip; }

/* Punktraster: in der mobilen Vorlage 0.75 px Punkte im 7-px-Raster statt
   2.6 px im 8.38-px-Raster wie auf dem Desktop. */
.dots {
  background-image: radial-gradient(
    circle at calc(1.75 * var(--u)) calc(1.75 * var(--u)),
    #000 calc(0.4 * var(--u)), transparent calc(0.52 * var(--u)));
}

.page { width: calc(360 * var(--u)); }

html { scroll-padding-top: calc(60 * var(--u)); }


/* ==========================================================================
   Kopfzeile  (y 0-60)
   ========================================================================== */
.site-header { height: calc(60 * var(--u)); }

/* Logo und Burger stehen wie im restlichen Projekt auf festen Design-
   koordinaten statt in der Flexbox - die Vorlage setzt beide leicht
   ausserhalb der optischen Mitte. */
.site-header__inner { position: relative; padding: 0; }

.brand {
  position: absolute;
  left: calc(25 * var(--u));
  top: calc(12.5 * var(--u));
  width: calc(80.7 * var(--u));
  margin-right: 0;
}

/* Der Sprachumschalter sitzt auf Mobile nur im Footer - oben waere neben
   Logo und Burger kein Platz, und die Vorlage zeigt ihn dort auch nicht. */
.site-header .lang { display: none; }

/* --- Burger --------------------------------------------------------------- */
.nav-toggle {
  display: block;
  position: absolute;
  left: calc(315.5 * var(--u));
  top: calc(18.5 * var(--u));
  width: calc(27 * var(--u));
  height: calc(19 * var(--u));
  color: #1e1e1e;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: calc(27 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: currentColor;
  transition: transform .22s ease, opacity .15s ease;
}
.nav-toggle__bars {
  position: relative;
  /* Mittlerer Balken: 19 px hoch, 3 px Balken -> 8 px von oben */
  margin-top: calc(8 * var(--u));
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: calc(-8 * var(--u)); }
.nav-toggle__bars::after  { top: calc(8 * var(--u)); }

/* Offener Zustand: aus den drei Balken wird ein Kreuz. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(calc(8 * var(--u))) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(calc(-8 * var(--u))) rotate(-45deg); }

/* --- Menue ---------------------------------------------------------------- */
/* Klappt unter der Kopfzeile auf. Hoehe 356 = Vorlage 375 minus die 19 px,
   die dort zusaetzlich unter dem aktiven Punkt stehen: die rote Markierung
   liegt bei uns absolut und schiebt die folgenden Punkte nicht mehr weg.
   Sonst wuerde das Menue beim Scrollen springen, sobald ein anderer Punkt
   aktiv wird. */
.nav {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: calc(360 * var(--u));
  height: calc(356 * var(--u));
  align-content: start;
  justify-items: center;
  /* 21.4 statt 26: der Abstand zaehlt bis zur Zeilenbox, die Oberkante
     der Versalien liegt 4.6 px tiefer. */
  padding-top: calc(21.4 * var(--u));
  gap: calc(25.8 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .13);
}
.site-header.is-open .nav { display: grid; }

.nav a {
  padding-inline: calc(6.7 * var(--u));
  line-height: calc(17.2 * var(--u));
  font-size: calc(24 * var(--u));
  letter-spacing: 0;
}
.nav a::after {
  top: calc(30.4 * var(--u));
  height: calc(8 * var(--u));
}


/* ==========================================================================
   Abschnittsraster  (Hoehen und Flaechen aus der Vorlage)
   ========================================================================== */
/* Auf dem Desktop ueberlappen sich einige Abschnitte um 1-3 px, damit die
   handgezeichneten Kanten sauber ineinandergreifen. In der mobilen Vorlage
   stossen sie exakt aneinander. */
.about, .refs, .ikigai { margin-top: 0; }

.hero    { height: calc(740 * var(--u)); }   /*   60 -  800 */
.about   { height: calc(932 * var(--u)); }   /*  800 - 1732 */
.works   { height: calc(1186 * var(--u)); }  /* 1732 - 2918 */
.refs    { height: calc(919 * var(--u)); }   /* 2918 - 3837 */
.brands  { height: calc(173 * var(--u)); }   /* 3837 - 4010 */
.ikigai  { height: calc(1428 * var(--u)); }  /* 4010 - 5438 */
.divider { height: calc(52 * var(--u)); }    /* 5438 - 5490 */
.posts   { height: calc(1712 * var(--u)); }  /* 5490 - 7202 */
.contact { height: calc(1003 * var(--u)); }  /* 7202 - 8205 */


/* ==========================================================================
   Hero  (y 60-800)
   ========================================================================== */
/* Eigenes Motiv: hochformatiger Ausschnitt mit weisser Flaeche fuer die
   Schrift. Es ragt links und rechts 4.5 px ueber die Spalte hinaus und ist
   unten laenger als der Abschnitt - genau wie in der Vorlage. */
.hero {
  background-position: center top;
  background-size: calc(369 * var(--u)) calc(820 * var(--u));
  background-image: url("../img/hero-bg-mobile.jpg");
  background-image: image-set(url("../img/hero-bg-mobile.webp") type("image/webp"),
                              url("../img/hero-bg-mobile.jpg")  type("image/jpeg"));
}

.hero__title {
  left: calc(20 * var(--u));
  top: calc(428.7 * var(--u));
  font-size: calc(90 * var(--u));
  line-height: calc(88 * var(--u));
  letter-spacing: calc(3.2 * var(--u));
}

.hero__sub {
  left: calc(23 * var(--u));
  top: calc(637.4 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: calc(2.3 * var(--u));
}

/* Auf dem Desktop fuellt der rote Balken den Rest der ersten Zeile. Mobil
   liegt er als durchgehender Strich ueber beiden Zeilen. */
.hero__sub-line { display: block; width: auto; }
.hero__rule {
  position: absolute;
  left: 0;
  top: calc(-16.4 * var(--u));
  width: calc(264 * var(--u));
  height: calc(3 * var(--u));
}

.hero__edge { height: calc(6 * var(--u)); bottom: calc(-2 * var(--u)); }


/* ==========================================================================
   Ueber mich  (y 800-1732)
   ========================================================================== */
/* Das Punktraster liegt mobil ueber die volle Breite hinter dem Foto und
   reicht bis zur Abschnittskante. */
.about__dots {
  left: 0;
  top: calc(693 * var(--u));
  width: calc(360 * var(--u));
  height: calc(247 * var(--u));
}

.about__head {
  left: calc(42.3 * var(--u));
  top: calc(26 * var(--u));
  gap: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(0.68 * var(--u));
}
.about__head-divider {
  /* Der Strich steht in der Vorlage 2 px hoeher als die Schrift. */
  position: relative;
  top: calc(-2 * var(--u));
  width: calc(4.1 * var(--u));
  height: calc(42 * var(--u));
  margin-block: 0;
}

.about__bio {
  left: calc(31 * var(--u));
  top: calc(80 * var(--u));
  width: calc(298 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16.17 * var(--u));
  /* Die Vorlage ist leicht gesperrt - ohne das brechen die Zeilen zu spaet
     und der Absatz faellt um eine Zeile kuerzer aus. */
  letter-spacing: calc(0.26 * var(--u));
}
.about__bio p + p { margin-top: calc(16.4 * var(--u)); padding-top: calc(14.6 * var(--u)); }

.about__photo {
  left: calc(51 * var(--u));
  top: calc(651 * var(--u));
  width: calc(257 * var(--u));
  height: calc(237 * var(--u));
}
/* Der Rahmen umschliesst die Flaeche mobil knapper als auf dem Desktop. */
.about__photo::after { inset: calc(-2.3 * var(--u)); }
.about__photo img {
  left: calc(19 * var(--u));
  top: calc(-176 * var(--u));
  width: calc(232 * var(--u));
}


/* ==========================================================================
   Werke  (y 1732-2918)
   ========================================================================== */
/* Eigene Streifen fuer das Hochformat: bei 360 px Breite zeigt der Ausschnitt
   das Motiv deutlich groesser als auf dem Desktop. Die Quellen haengen als
   <source media="..."> im Markup. */
.works__strip {
  width: calc(360 * var(--u));
  height: calc(76 * var(--u));
}
.works__strip--top    { top: calc(-1 * var(--u)); }
.works__strip--bottom { top: calc(1090 * var(--u)); height: calc(99 * var(--u)); }

.works__cover {
  left: calc(31 * var(--u));
  top: calc(94 * var(--u));
  width: calc(297 * var(--u));
  height: calc(430 * var(--u));
}
.works__cover img {
  left: 0;
  top: 0;
  width: calc(297 * var(--u));
  height: calc(430 * var(--u));
}

/* Mobil steht der Textblock ueber die volle Breite und ist zentriert. */
.works__body {
  left: 0;
  top: calc(539 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
}
/* Der Satzspiegel ist schmaler als die Spalte, damit Titel und Klappentext
   wie in der Vorlage mittig in mehreren kurzen Zeilen stehen. balance teilt
   den Titel gleichmaessig auf - die Vorlage hat den Umbruch von Hand gesetzt,
   was bei wechselnden Baenden und zwei Sprachen nicht funktioniert. */
.works__title {
  margin-inline: auto;
  width: calc(290 * var(--u));
  text-wrap: balance;
  /* Zwei Zeilen Mindesthoehe: "Green Garden (Band 2)" passt in eine, der
     Klappentext soll auf beiden Seiten trotzdem auf gleicher Hoehe beginnen. */
  min-height: calc(52 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
}
.works__text {
  margin-top: calc(18 * var(--u));
  margin-inline: auto;
  width: calc(232 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}
.works__text p + p { margin-top: calc(16 * var(--u)); }

.works__volume .works__award { margin-top: calc(22.4 * var(--u)); margin-inline: auto; width: calc(135 * var(--u)); }

/* Die Leseprobe sitzt dort, wo in der Vorlage der Shop-Button stand - der
   Shop-Link haengt wie auf dem Desktop am Wort "Altraverse" im Text. */
.works__actions {
  top: calc(331 * var(--u));
  width: calc(360 * var(--u));
  justify-content: center;
}
.works__sample { font-size: calc(14 * var(--u)); }

.works__thumbs {
  left: 0;
  top: calc(914.5 * var(--u));
  width: calc(360 * var(--u));
  max-width: calc(360 * var(--u));
  justify-content: center;
  gap: calc(21 * var(--u));
}
.works__thumbs .works__thumb { width: calc(76 * var(--u)); height: calc(110 * var(--u)); }

/* Green Garden hat vier Baende. Mit 21 px Abstand laeuft der vierte in der
   Vorlage rechts aus dem Bild - hier ruecken sie stattdessen enger zusammen. */
.works__slide--free .works__thumbs { gap: calc(8 * var(--u)); }

/* Mobil liegen die Punkte auf Weiss - dort braucht es weder Kapsel noch Ring. */
.works__dots {
  left: calc(146 * var(--u));
  top: calc(1048 * var(--u));
  transform: none;
  gap: calc(17 * var(--u));
  padding: 0;
  border-radius: 0;
  background: none;
}
.works__dots button {
  width: calc(25 * var(--u));
  height: calc(24 * var(--u));
  background: var(--grey-300);
  box-shadow: none;
}
.works__dots button:hover { background: #c2c2c2; }
.works__dots button[aria-current="true"] { background: #222222; }

.works__timer {
  left: calc(305 * var(--u));
  top: calc(1048 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

/* In der Vorlage gibt es keine Pfeile - zwischen den beiden Seiten wird
   ueber die Punkte gewechselt. */
.carousel-arrow { display: none; }


/* ==========================================================================
   Referenzen  (y 2918-3837)
   ========================================================================== */
/* Das Punktraster liegt hinter Karte und Limettenflaeche und ist nur in den
   Luecken sichtbar - anders als auf dem Desktop ohne Drehung. */
.refs__dots {
  left: 0;
  right: auto;
  top: calc(390 * var(--u));
  width: calc(360 * var(--u));
  height: calc(529 * var(--u));
  transform: none;
}

.refs__head {
  left: 0;
  top: calc(14 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(0.74 * var(--u));
}

.refs__card {
  left: calc(14 * var(--u));
  top: calc(60 * var(--u));
  width: calc(332 * var(--u));
  height: calc(530 * var(--u));
  --frame: url("../svg/frame-ref-grey-m.svg");
}
.refs__card::after { inset: calc(-1.7 * var(--u)); }
/* Mobil ist die untere linke Ecke angeschnitten, nicht die rechte Kante. */
.refs__card .clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86.6%); }

.refs__logo {
  left: calc(42 * var(--u));
  top: calc(25 * var(--u));
  width: calc(248 * var(--u));
  height: calc(139 * var(--u));
  --frame: url("../svg/box-logo-m.svg");
}
.refs__logo::after { inset: calc(-2 * var(--u)); }
.refs__logo img { left: calc(64 * var(--u)); top: calc(9 * var(--u)); width: calc(122 * var(--u)); }

.refs__quote {
  left: 0;
  top: calc(180 * var(--u));
  width: calc(332 * var(--u));
  text-align: center;
}
.refs__quote h3 {
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
}
.refs__quote blockquote {
  margin: calc(9 * var(--u)) auto 0;
  width: calc(243 * var(--u));
  min-height: calc(128 * var(--u));   /* acht Zeilen */
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.26 * var(--u));
}
.refs__source { margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }

.refs__art {
  left: calc(14 * var(--u));
  top: calc(564 * var(--u));
  width: calc(332 * var(--u));
  height: calc(319 * var(--u));
  --frame: url("../svg/frame-ref-lime-m.svg");
}
.refs__art::after { inset: calc(-2 * var(--u)); }
/* Oberkante faellt von links nach rechts ab. */
.refs__art .clip { clip-path: polygon(0 0.8%, 100% 22.2%, 100% 100%, 0 100%); }
/* Mobil ist die Figur deutlich naeher herangeholt: der Kopf fuellt das obere
   Drittel, unten endet sie an der Rahmenkante. Links und rechts laeuft sie
   aus dem Bild - die Section schneidet sie ab, genau wie die Vorlage. */
.refs__art img {
  left: calc(-282 * var(--u));
  top: calc(-261.5 * var(--u));
  width: calc(925 * var(--u));
}


/* ==========================================================================
   Bekannt aus  (y 3837-4010)
   ========================================================================== */
/* Anders als auf dem Desktop ist die Zeile mobil praktisch nicht gesperrt. */
.brands h2 {
  padding-top: calc(12 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(0.17 * var(--u));
  text-indent: calc(0.17 * var(--u));
}

:root { --marquee-gap: calc(20 * var(--u)); }
.marquee {
  top: calc(54 * var(--u));
  height: calc(86 * var(--u));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(43 * var(--u)), #000 calc(100% - 43 * var(--u)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 calc(43 * var(--u)), #000 calc(100% - 43 * var(--u)), transparent);
}
.marquee__group li { width: calc(86 * var(--u)); height: calc(86 * var(--u)); }


/* ==========================================================================
   IKIGAI  (y 4010-5438)
   ========================================================================== */
.ikigai__wordmark {
  left: 0;
  top: calc(20 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(0.65 * var(--u));
}
.ikigai__claim {
  left: 0;
  top: calc(63 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(0.63 * var(--u));
}
/* Die festen Zeilenumbrueche im Markup sind auf die Desktopbreite gesetzt und
   wuerden hier jede Zeile ein zweites Mal brechen. Mobil laeuft der Absatz
   deshalb frei - die Umbrueche im Markup sind von Leerzeichen umgeben, es
   klebt also nichts zusammen. */
.ikigai__text br { display: none; }
.ikigai__text {
  left: calc(43 * var(--u));
  top: calc(93 * var(--u));
  width: calc(274 * var(--u));
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.26 * var(--u));
}

.ikigai__cover {
  left: calc(39 * var(--u));
  top: calc(245 * var(--u));
  width: calc(282 * var(--u));
  height: calc(288 * var(--u));
  --frame: url("../svg/frame-ikigai-cover-m.svg");
}
.ikigai__cover::after { inset: calc(-1.6 * var(--u)); }

/* Mobil stehen die vier Podcast-Schaltflaechen untereinander in der Mitte. */
.ikigai__links {
  left: calc(63 * var(--u));
  top: calc(561 * var(--u));
  gap: calc(24 * var(--u));
}
.ikigai__links a { font-size: calc(18 * var(--u)); }

.ikigai__video {
  left: calc(58 * var(--u));
  top: calc(922 * var(--u));
  width: calc(244 * var(--u));
  height: calc(427 * var(--u));
  --frame: url("../svg/box-video-m.svg");
}
.ikigai__video img {
  left: calc(2 * var(--u));
  top: calc(2 * var(--u));
  width: calc(240 * var(--u));
  height: calc(423 * var(--u));
}
.ikigai__video-outer {
  left: calc(37.4 * var(--u));
  top: calc(900.9 * var(--u));
  width: calc(285.4 * var(--u));
  height: calc(469.4 * var(--u));
  background-image: url("../svg/frame-ikigai-video-m.svg");
}
.ikigai__play {
  left: calc(83 * var(--u));
  top: calc(175 * var(--u));
  width: calc(77 * var(--u));
  height: calc(78 * var(--u));
}
.ikigai__play svg { width: calc(36 * var(--u)); height: calc(41 * var(--u)); margin-left: calc(4 * var(--u)); }


/* ==========================================================================
   Manga-Trennband  (y 5438-5490)
   ========================================================================== */
/* Mobil liegt der Streifen leicht schraeg und ist breiter als die Spalte -
   die Enden laufen links und rechts aus dem Bild. */
.divider { background: var(--grey-100); }
.divider img {
  left: calc(-85 * var(--u));
  top: calc(-22 * var(--u));
  width: calc(530 * var(--u));
  height: calc(76 * var(--u));
  transform: rotate(2.39deg);
}


/* ==========================================================================
   Aktuelle Beitraege  (y 5490-7202)
   ========================================================================== */
.posts__head {
  left: 0;
  top: calc(19 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(0.92 * var(--u));
}

/* Mobil steht das Bild ueber der Karte statt daneben. */
.post-main {
  left: calc(12 * var(--u));
  top: calc(614 * var(--u));
  width: calc(332 * var(--u));
  height: calc(526 * var(--u));
  --frame: url("../svg/frame-post-main-m.svg");
}
.post-main::after { inset: calc(-1.5 * var(--u)); }

.post-main__media {
  left: calc(-2 * var(--u));
  top: calc(-552 * var(--u));
  width: calc(336 * var(--u));
  height: calc(554 * var(--u));
  --frame: url("../svg/box-post-media-m.svg");
}
/* Bild ODER Video - wie am Desktop. Ohne die zweite Zeile bleibt ein Video
   mobil ungemasst. */
.post-main__media img,
.post-main__media video { left: calc(2 * var(--u)); width: calc(332 * var(--u)); height: calc(550 * var(--u)); }

.post-main__body {
  left: 0;
  top: calc(20 * var(--u));
  width: calc(332 * var(--u));
  text-align: center;
}
.post-main__body h3 { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
.post-main__date { margin-top: calc(3 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.post-main__text {
  margin-top: calc(20 * var(--u));
  margin-inline: auto;
  width: calc(276 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.26 * var(--u));
}
.post-main__text p + p { margin-top: calc(16 * var(--u)); }
.post-main__cta {
  left: calc(38 * var(--u));
  top: calc(450 * var(--u));
  width: calc(260 * var(--u));
  height: calc(40 * var(--u));
  padding-inline: 0;
  font-size: calc(18 * var(--u));
}

.post-side {
  left: calc(14 * var(--u));
  top: calc(1156 * var(--u));
  width: calc(332 * var(--u));
  height: calc(520 * var(--u));
  --frame: url("../svg/frame-post-side-m.svg");
}
.post-side::after { inset: calc(-1.6 * var(--u)); }
/* 532 ist hier die Hoehe des Originalbilds bei 332 Breite - siehe
   style.css. */
.post-side img,
.post-side video { top: 0; height: calc(532 * var(--u)); }


/* ==========================================================================
   Kontakt  (y 7202-8332)
   ========================================================================== */
.contact__head {
  left: 0;
  top: calc(20 * var(--u));
  width: calc(360 * var(--u));
  text-align: center;
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(1 * var(--u));
}

.contact__photo {
  left: calc(15 * var(--u));
  top: calc(74 * var(--u));
  width: calc(331 * var(--u));
  height: calc(298 * var(--u));
  --frame: url("../svg/frame-contact-left-m.svg");
}
.contact__photo::after { inset: calc(-3.3 * var(--u)); }
/* Unterkante faellt nach rechts ab, Oberkante bleibt gerade. */
.contact__photo .clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 76.8%); }
.contact__photo img { left: calc(-15 * var(--u)); top: calc(-22.5 * var(--u)); width: calc(442.5 * var(--u)); }

.contact__card {
  left: calc(14 * var(--u));
  top: calc(319 * var(--u));
  width: calc(332 * var(--u));
  height: calc(291 * var(--u));
  --frame: url("../svg/frame-contact-mid-m.svg");
}
.contact__card::after { inset: calc(-2 * var(--u)); }
.contact__card .clip { clip-path: polygon(0 0.9%, 100% 24.1%, 100% 99%, 0 74.8%); }

.contact__icon {
  left: calc(32 * var(--u));
  top: calc(95 * var(--u));
  width: calc(82 * var(--u));
  height: calc(83 * var(--u));
}
.contact__icon::after { background-image: url("../svg/circle-mail-m.svg"); }
.contact__icon svg { width: calc(45 * var(--u)); height: calc(45 * var(--u)); }

.contact__lead {
  left: calc(127 * var(--u));
  top: calc(107 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
}
.contact__mail {
  left: calc(127 * var(--u));
  top: calc(157 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
}

.contact__art {
  left: calc(13 * var(--u));
  top: calc(558 * var(--u));
  width: calc(333 * var(--u));
  height: calc(303 * var(--u));
  --frame: url("../svg/frame-contact-right-m.svg");
}
.contact__art::after { inset: calc(-1.5 * var(--u)); }
.contact__art .clip { clip-path: polygon(0 0.5%, 100% 23.9%, 100% 100%, 0 100%); }
.contact__art img { left: calc(-215 * var(--u)); top: calc(-295 * var(--u)); width: calc(729 * var(--u)); }

/* Die vier Kreise stehen in einer Reihe ueber die volle Spaltenbreite.
   Durchmesser und Abstand behalten das Verhaeltnis der Vorlage (33 : 92):
   4 x 66 + 3 x 24 = 336, also dieselben Raender wie Karte und Bildflaeche. */
.contact__social {
  left: calc(12 * var(--u));
  top: calc(884 * var(--u));
  gap: calc(24 * var(--u));
}
.contact__social a { width: calc(66 * var(--u)); height: calc(66.6 * var(--u)); }
.contact__social a::before { background-image: url("../svg/circle-social-m.svg"); }
.contact__social svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }


/* ==========================================================================
   Fusszeile  (y 8332-8818, 486 hoch)
   ========================================================================== */
.site-footer { height: calc(486 * var(--u)); }

/* Die Vorlage zeigt im mobilen Footer kein Logo. */
.site-footer__logo { display: none; }

.site-footer nav {
  top: calc(47 * var(--u));
  gap: calc(22 * var(--u));
}
.site-footer nav.col-1 { left: 0; width: calc(204 * var(--u)); justify-items: center; }
.site-footer nav.col-2 { left: calc(221 * var(--u)); justify-items: start; }
/* Presskit / Impressum / DSGVO stehen auf Mobile mittig unter den Icons */
.site-footer nav.col-3 {
  left: 0;
  width: calc(360 * var(--u));
  top: calc(293 * var(--u));
  justify-items: center;
}
.site-footer nav a { font-size: calc(18 * var(--u)); line-height: calc(16 * var(--u)); }

.site-footer__social {
  left: calc(77 * var(--u));
  top: calc(209 * var(--u));
  grid-auto-flow: column;
  gap: calc(26 * var(--u));
}
/* Im mobilen Footer sitzen die Icons in weissen Kreisen - umgekehrt zum
   Desktop, wo sie als blanke weisse Glyphen auf dem Dunkel stehen. */
.site-footer__social a {
  width: calc(51 * var(--u));
  height: calc(51 * var(--u));
  border-radius: 50%;
  background: #fff;
  color: var(--footer-bg);
}
.site-footer__social a:hover { color: var(--red); }
.site-footer__social svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

.site-footer__lang {
  left: 0;
  right: auto;
  width: calc(360 * var(--u));
  top: calc(405 * var(--u));
  justify-content: center;
  gap: calc(19 * var(--u));
}
.site-footer__lang a { width: calc(25.6 * var(--u)); height: calc(25.6 * var(--u)); }

/* Ohne Sperrung: mit den 0.8 px vom Desktop liefe die Zeile auf 360 px
   Breite bis an beide Raender. */
.site-footer__meta { top: calc(461 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: 0; }


/* ==========================================================================
   Impressum / Datenschutz
   Diese Seiten haben keine eigene Vorlage - sie enthalten laut Briefing nur
   Text. Sie bekommen deshalb die Raender des mobilen Rasters (25 px) und eine
   Ueberschrift, die bei 360 px Breite noch in eine Zeile passt.
   ========================================================================== */
.legal { padding: calc(48 * var(--u)) calc(25 * var(--u)) calc(72 * var(--u)); }
.legal h1 { font-size: calc(40 * var(--u)); letter-spacing: calc(1 * var(--u)); }
.legal h2 { margin-top: calc(34 * var(--u)); font-size: calc(21 * var(--u)); }
.legal h3 { margin-top: calc(22 * var(--u)); font-size: calc(17 * var(--u)); }
.legal p, .legal li { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); }