/* ==========================================================================
   Isabelle's Creative Studio — Startseite
   --------------------------------------------------------------------------
   Die Seite ist 1:1 nach dem Figma-Design gebaut. Das Design ist 1425 Pixel
   breit; alle Maße hier sind genau die Werte aus Figma.

   Der Trick, damit die Verhältnisse auf JEDEM Bildschirm gleich bleiben:
   --px ist die Größe eines Design-Pixels auf dem aktuellen Bildschirm.
   Jedes Maß wird damit multipliziert. Wird das Fenster breiter, wächst alles
   im gleichen Verhältnis mit — Schrift, Abstände, Bilder.
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Ein Design-Pixel in echten Bildschirm-Pixeln.
     Ab 2000 px Fensterbreite wächst die Seite nicht weiter mit — sonst wird
     die Schrift auf sehr großen Monitoren unangenehm groß. */
  --px: calc(min(100vw, 2000px) / 1425);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Ausgeblendetes muss wirklich ausgeblendet sein.
   Hintergrund: Weiter unten setzt die Regel für #menueFlaeche "display: flex".
   Eine ID-Regel ist stärker als das eingebaute Ausblenden des Browsers — die
   geschlossene Menüfläche lag dadurch unsichtbar über der ganzen Seite und
   fing JEDEN Klick ab. Diese Zeile verhindert das. */
[hidden] { display: none !important; }

html { background: #fff; }

/* --------------------------------------------------------------------------
   Durchgängige Kleinschreibung — bewusste Designentscheidung
   --------------------------------------------------------------------------
   Gilt für die Inhaltsseiten und das Menü, ABER NICHT für Impressum und
   Datenschutz: Das sind deutsche Rechtstexte. Dort müssen Substantive groß
   bleiben, und Name und Anschrift müssen korrekt lesbar sein.

   Umgesetzt im Stil statt im Text. Vorteil: Der Quelltext bleibt richtig
   geschrieben — das zählt für Suchmaschinen, den Fenstertitel und
   Bildbeschreibungen — und die Entscheidung ist mit einer Zeile umkehrbar.
   -------------------------------------------------------------------------- */
.seite,
#menueFlaeche { text-transform: lowercase; }

/* Knöpfe und Eingabefelder erben text-transform NICHT — die Browser setzen
   dafür eigene Vorgaben. Deshalb hier ausdrücklich noch einmal. */
.seite button,
.seite input,
.seite textarea,
#menueFlaeche button { text-transform: lowercase; }

/* Ausnahme: Das englische Personalpronomen "I" bleibt groß. Ein kleines "i"
   liest sich im Englischen wie ein Tippfehler. Gilt nur fuer das Pronomen —
   "isabelle" und "instagram" bleiben klein. */
.ich { text-transform: none; }

body {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: #000;
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Die Fläche, auf der alles liegt — genau im Seitenverhältnis des Designs
   -------------------------------------------------------------------------- */
.seite {
  position: relative;
  width: calc(1425 * var(--px));
  height: calc(var(--hoehe) * var(--px));   /* Höhe kommt je Seite aus dem HTML */
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

/* Jedes Element bekommt seine Figma-Koordinaten als --x/--y/--w/--h mit. */
.el {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
}

/* Bilder und Videos füllen ihren Rahmen formatfüllend aus. */
.el > img,
.el > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.txt {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* Figma zentriert Text senkrecht im Rahmen */
  font-size: calc(var(--fs) * var(--px));
  line-height: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.txt p { line-height: inherit; }
.txt.locker { line-height: 1.33; }  /* die beiden Absatz-Blöcke im Design */
.txt .klein  { font-size: calc(var(--fs2) * var(--px)); }
.txt .leer   { display: block; }

.mitte  { text-align: center; }
.rechts { text-align: right; }
.weiss  { color: #fff; }
.bold   { font-weight: 700; }
.regular{ font-weight: 400; }

/* --------------------------------------------------------------------------
   Einzelne Bausteine
   -------------------------------------------------------------------------- */

/* Der bräunliche Balken hinter dem "Welcome"-Abschnitt */
.band { background: rgba(30, 20, 10, 0.73); }

/* Knopf "see my work & conditions" */
.knopf-flaeche {
  background: #fff;
  border: max(1px, calc(0.5 * var(--px))) solid #000;
}
a.knopf-text {
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a.knopf-text:hover { opacity: 0.55; }

/* Menü oben rechts — drei Striche, genau wie auf deiner "how I work"-Seite */
.menue {
  position: absolute;
  left: calc(1312 * var(--px));
  top: calc(35 * var(--px));
  width: calc(81 * var(--px));
  height: calc(33 * var(--px));
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 20;
  padding: 0;
}
.menue span {
  display: block;
  width: 100%;
  height: calc(5 * var(--px));
  background: #fff;
  margin-bottom: calc(9 * var(--px));
  transition: opacity 0.3s ease;
}
.menue span:last-child { margin-bottom: 0; }
.menue:hover span { opacity: 0.6; }

/* Nur Startseite, nur Desktop (2026-09-23): Der Knopf sitzt auf der Hoehe
   des Logos und weiter weg vom Rand.
   Gerechnet, nicht geschaetzt — die sichtbare Schrift im Logo-PNG liegt
   bei Zeile 331 bis 559 von 990 und Spalte 117 bis 1005 von 1100:
     Schrift-Mitte  = -72 + 482 * (445/990)      = 145  -> top = 145 - 16.5
     Schrift links  =  39 + 536 * (117/1100)     =  96  -> derselbe Abstand
                                                           rechts: 1425 - 96
                                                           = 1329 als rechte
                                                           Kante, also
                                                           links = 1329 - 81
   Der min-width-Block ist wichtig: ohne ihn wuerde diese Regel wegen
   hoeherer Gewichtung auch die Handy-Fassung ueberstimmen, wo der Knopf
   fest oben rechts klebt. "about me" und "how I work" haben kein Logo und
   behalten ihren Knopf an der Figma-Position. */
@media (min-width: 901px) {
  .seite:has(.m-logo) > .menue {
    left: calc(1248 * var(--px));
    top: calc(128 * var(--px));
  }
}

/* E-Mail-Link im Fuß */
a.mail {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a.mail:hover { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Ton-Knopf auf den Videos
   Browser erlauben kein automatisches Abspielen mit Ton. Die Videos laufen
   deshalb stumm los; hierüber schaltet der Besucher den Ton dazu.

   Wichtig: .video-platz darf KEIN "position" setzen. Es würde das
   "position: absolute" aus .el überschreiben und das Video aus seiner
   Position werfen. Der Rahmen aus .el ist schon Bezugspunkt für den Knopf.
   -------------------------------------------------------------------------- */
.ton {
  position: absolute;
  right: calc(18 * var(--px));
  bottom: calc(18 * var(--px));
  width: calc(44 * var(--px));
  height: calc(44 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}
.ton:hover { background: rgba(0, 0, 0, 0.62); }
.ton svg {
  width: calc(21 * var(--px));
  height: calc(21 * var(--px));
  fill: #fff;
  display: block;
}
.ton .an  { display: none; }
.ton[aria-pressed='true'] .an  { display: block; }
.ton[aria-pressed='true'] .aus { display: none; }

/* --------------------------------------------------------------------------
   Rechtliche Links — Pflicht in Deutschland, im Design nicht vorgesehen
   -------------------------------------------------------------------------- */
.recht {
  position: absolute;
  left: calc(117 * var(--px));
  top: calc(var(--ry) * var(--px));
  font-size: calc(17 * var(--px));
  font-weight: 400;
  z-index: 5;
}
.recht a {
  color: #000;
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.recht a:hover { opacity: 1; text-decoration: underline; }
.recht span { opacity: 0.3; margin: 0 calc(10 * var(--px)); }

/* --------------------------------------------------------------------------
   Sanftes Einfahren beim Scrollen
   Ruhig und langsam — im Luxussegment soll nichts hüpfen oder blinken.
   -------------------------------------------------------------------------- */
/* Die Bewegungskurve der ganzen Seite. Startet zügig, läuft sehr weich aus —
   das ist der Unterschied zwischen "eingeblendet" und "enthüllt". */
:root { --kurve: cubic-bezier(0.16, 1, 0.3, 1); }

.anim {
  opacity: 0;
  transform: translateY(calc(18 * var(--px)));
  transition: opacity 1.4s var(--kurve), transform 1.4s var(--kurve);
  will-change: opacity, transform;
}
.anim.da { opacity: 1; transform: none; }

/* Bilder zoomen beim Einfahren minimal heraus — langsamer als der Text,
   damit die Bewegung nachklingt, statt gleichzeitig abzubrechen. */
.anim-bild > img,
.anim-bild > video { transform: scale(1.06); transition: transform 2.2s var(--kurve); }
.anim-bild.da > img,
.anim-bild.da > video { transform: scale(1); }

/* --------------------------------------------------------------------------
   Zeilenweise Enthüllung für die großen Aussagen
   Jede Zeile sitzt in einem Rahmen mit beschnittenem Rand und steigt daraus
   hervor. Die Zeilen folgen versetzt aufeinander.
   -------------------------------------------------------------------------- */
.zeilen-auf.anim {
  opacity: 1;                /* der Block selbst bewegt sich nicht ... */
  transform: none;
  transition: none;
}
.zeilen-auf p {
  overflow: hidden;          /* ... nur die Zeilen darin */
  /* Luft für Unterlängen (y, p, g), ohne die Position zu verschieben */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.zeilen-auf p > span {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  transition: transform 1.5s var(--kurve), opacity 1.2s ease-out;
}
.zeilen-auf.da p > span { transform: none; opacity: 1; }
.zeilen-auf p:nth-of-type(2) > span { transition-delay: 0.17s; }
.zeilen-auf p:nth-of-type(3) > span { transition-delay: 0.34s; }

/* --------------------------------------------------------------------------
   Der erste Eindruck: Hero beim Laden
   Das Video blendet auf, danach steigen Logo und Zeile nach.
   -------------------------------------------------------------------------- */
.start { opacity: 0; transition: opacity 1.9s ease; }
body.geladen .start { opacity: 1; }

.start-auf {
  opacity: 0;
  transform: translateY(calc(14 * var(--px)));
  transition: opacity 1.3s var(--kurve), transform 1.3s var(--kurve);
}
body.geladen .start-auf { opacity: 1; transform: none; }
body.geladen .start-auf.spaeter  { transition-delay: 0.45s; }
body.geladen .start-auf.spaeter2 { transition-delay: 0.7s; }

/* Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .anim,
  .anim-bild > img,
  .zeilen-auf p > span,
  .start,
  .start-auf,
  body.geladen .start,
  body.geladen .start-auf {
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Menü-Überlagerung — Vorschlag, im Figma-Design noch nicht enthalten
   -------------------------------------------------------------------------- */
#menueFlaeche {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 20, 10, 0.94);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#menueFlaeche.offen { opacity: 1; }

#menueFlaeche nav {
  display: flex;
  flex-direction: column;
  gap: calc(34 * var(--px));
  text-align: center;
}
#menueFlaeche nav a {
  color: #fff;
  font-size: calc(46 * var(--px));
  font-weight: 500;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
#menueFlaeche nav a:hover { opacity: 1; }

#menueZu {
  position: absolute;
  top: calc(34 * var(--px));
  right: calc(46 * var(--px));
  width: calc(56 * var(--px));
  height: calc(56 * var(--px));
  font-size: calc(46 * var(--px));
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
#menueZu:hover { opacity: 1; }

/* ==========================================================================
   Impressum und Datenschutz — schlichte Lesefassung, gleiche Schrift
   ========================================================================== */
.recht-seite {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 28px 120px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}
.recht-seite .zurueck {
  display: inline-block;
  margin-bottom: 52px;
  font-size: 15px;
  color: #000;
  opacity: 0.55;
  text-decoration: none;
}
.recht-seite .zurueck:hover { opacity: 1; text-decoration: underline; }
.recht-seite h1 { font-size: 34px; font-weight: 500; margin-bottom: 38px; letter-spacing: -0.01em; }
.recht-seite h2 { font-size: 19px; font-weight: 500; margin: 40px 0 10px; }
.recht-seite p  { margin-bottom: 14px; }
.recht-seite ul { margin: 0 0 14px 22px; }
.recht-seite li { margin-bottom: 5px; }
.recht-seite a  { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.recht-seite .stand { margin-top: 56px; font-size: 14px; opacity: 0.55; }

/* ==========================================================================
   Seite "how I work" — zusätzliche Bausteine
   ========================================================================== */

/* Grauer Beschreibungstext im Design (#777) */
.grau { color: #777; }

/* Heller Knopf auf dunklem Bild: durchsichtig mit weißem Rand */
.knopf-hell {
  background: transparent;
  border: max(1px, calc(1 * var(--px))) solid #fff;
}
a.knopf-text-hell {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a.knopf-text-hell:hover { opacity: 0.6; }

/* Elemente, die es nur in der Handy-Fassung gibt. Auf dem Desktop
   vollstaendig weg — sonst wuerden sie die Figma-Vorlage veraendern.
   Das !important ist noetig, weil .seite > .el spaeter display setzt. */
.nur-handy-el { display: none !important; }

/* Der senkrechte Trennstrich über den Paketen */
.strich-senkrecht { background: #000; }

/* --------------------------------------------------------------------------
   "see more details" — aufklappbare Paketdetails
   Die Texte dafür liegen im Figma neben der Seite; sie gehören zu den
   vier Knöpfen und erscheinen hier als Klappfenster darüber.
   -------------------------------------------------------------------------- */
button.knopf-box {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(18 * var(--px)) 0 calc(16 * var(--px));
  background: #fff;
  border: max(1px, calc(0.5 * var(--px))) solid #000;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(20 * var(--px));
  color: #000;
  cursor: pointer;
  z-index: 6;
  transition: background 0.3s ease;
}
button.knopf-box:hover { background: #f4f2ef; }

button.knopf-box svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  flex: none;
  stroke: #000;
  stroke-width: 1.6;
  fill: none;
  transition: transform 0.35s ease;
}
button.knopf-box[aria-expanded='true'] svg { transform: rotate(180deg); }

.details {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(540 * var(--px));
  background: #fff;
  border: max(1px, calc(0.5 * var(--px))) solid #000;
  padding: calc(24 * var(--px)) calc(28 * var(--px));
  font-size: calc(20 * var(--px));
  font-weight: 500;
  line-height: 1.5;
  color: #555;
  z-index: 30;
  box-shadow: 0 calc(12 * var(--px)) calc(38 * var(--px)) rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(calc(-8 * var(--px)));
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
/* Auch im offenen Zustand laesst das Fenster Klicks durch (pointer-events
   bleibt none). Sonst verdeckt ein offenes Fenster den Knopf des naechsten
   Pakets, und ein Klick darauf waere wirkungslos — es wirkte dann so, als
   funktionierten die Dropdowns nicht. */
.details.offen { opacity: 1; transform: none; }

.details ul { list-style: none; margin: 0; }
.details li {
  position: relative;
  padding-left: calc(17 * var(--px));
  margin-bottom: calc(7 * var(--px));
}
.details li:last-child { margin-bottom: 0; }
.details li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(12 * var(--px));
  width: calc(7 * var(--px));
  height: calc(1 * var(--px));
  background: #999;
}

/* Kopfzeile und Zusatzzeile in den Klappfenstern */
.details .d-kopf {
  font-weight: 700;
  color: #000;
  margin-bottom: calc(12 * var(--px));
}
.details .d-extra {
  margin-top: calc(14 * var(--px));
  padding-top: calc(12 * var(--px));
  border-top: max(1px, calc(0.5 * var(--px))) solid #e2ded8;
  color: #000;
}

/* ==========================================================================
   Seite "about me"
   ========================================================================== */

/* Auf dieser Seite sitzt Text am OBEREN Rand seines Rahmens, nicht mittig.
   Die Vorlage (Canva) setzt Text so; damit stimmen die Y-Werte direkt. */
.txt-oben { justify-content: flex-start; }

/* Menü-Striche in Schwarz — der Seitenkopf ist hier weiß, weiße Striche
   wären unsichtbar. */
.menue.dunkel span { background: #000; }

/* Unterstrichene E-Mail wie in der Vorlage */
a.mail-unter {
  color: inherit;
  text-decoration: underline;
  /* max(1px, …) wie bei allen Haarlinien: unter ~600 px Fensterbreite
     waere ein Design-Pixel weniger als ein echter, der Strich waere weg. */
  text-underline-offset: max(2px, calc(6 * var(--px)));
  text-decoration-thickness: max(1px, calc(3 * var(--px)));
  transition: opacity 0.3s ease;
}
a.mail-unter:hover { opacity: 0.55; }

/* Sprachwechsel auf den Rechtsseiten — rechts neben dem Zurück-Link */
.recht-seite .zurueck.sprache { float: right; }

/* ==========================================================================
   Beispiel-Bühne im Paket-Bereich ("how I work")
   --------------------------------------------------------------------------
   Der Kunde wählt über eine Liste, welches Beispiel läuft. Die Bühne
   wechselt dabei ihr FORMAT: 9:16 für Videos, 2:3 für Fotos, 4:5 für
   Carousels. Die Höhe wird überblendet, damit der Formatwechsel nicht
   springt. Breite bleibt immer 481 — nur die Höhe atmet.
   ========================================================================== */

/* --- Die Auswahlliste über der Bühne --- */
.auswahl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 8;
}
.auswahl button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(var(--fs) * var(--px));
  font-weight: 500;
  line-height: 1;
  color: #b9b4ae;                    /* hellgrau: läuft gerade nicht */
  text-transform: lowercase;
  transition: color 0.35s ease;
  white-space: nowrap;
}
.auswahl button:hover { color: #7a746e; }
.auswahl button.aktiv {
  color: #000;                       /* schwarz: läuft gerade */
  font-weight: 700;
}

/* --- Die Bühne selbst --- */
.buehne {
  overflow: hidden;
  transition: height 0.85s var(--kurve);
}
.buehne.f916 { height: calc(861 * var(--px)); }   /* 9:16 — Videos   */
.buehne.f23  { height: calc(721 * var(--px)); }   /* 2:3  — Fotos    */
.buehne.f45  { height: calc(601 * var(--px)); }   /* 4:5  — Carousel */

/* --- Die vier Inhaltsflächen, übereinander und übergeblendet --- */
.buehne .pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.buehne .pane.aktiv { opacity: 1; pointer-events: auto; }

.buehne .pane > video,
.buehne .pane > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bildfolge und Carousel blenden innerhalb ihrer Fläche über */
.buehne .pane > .foto,
.buehne .pane > .karo { opacity: 0; transition: opacity 0.8s ease; }
.buehne .pane > .foto.aktiv,
.buehne .pane > .karo.aktiv { opacity: 1; }

/* --- Punkte für die drei Carousel-Slides --- */
.punkte {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18 * var(--px));
  display: flex;
  gap: calc(9 * var(--px));
  z-index: 11;
}
.punkte button {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  min-width: 6px;
  min-height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}
.punkte button.aktiv { background: #fff; transform: scale(1.3); }

/* --- Kleine Beschriftung oben links in der Ecke --- */
.clip-marke {
  position: absolute;
  left: calc(16 * var(--px));
  top: calc(14 * var(--px));
  z-index: 12;
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  padding: calc(6 * var(--px)) calc(12 * var(--px));
  border-radius: calc(3 * var(--px));
  max-width: calc(440 * var(--px));
  transition: opacity 0.4s ease;
}

/* Bei Fotos gibt es keinen Ton — Knopf ausblenden statt tot stehen lassen */
.buehne.ohne-ton .ton { opacity: 0; pointer-events: none; }
.buehne .ton { transition: opacity 0.4s ease, background 0.3s ease; }

/* --------------------------------------------------------------------------
   Blätter-Pfeile am linken und rechten Bildrand
   Klein und zurückhaltend: dünne Haken, halbdurchsichtig, mit weichem
   Schatten — sonst verschwinden sie auf hellen Fotos (Himmel, Wasser).
   -------------------------------------------------------------------------- */
.blaettern {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 11;
  opacity: 0.62;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.blaettern.links  { left:  calc(4 * var(--px)); }
.blaettern.rechts { right: calc(4 * var(--px)); }

.blaettern svg {
  width: calc(21 * var(--px));
  height: calc(21 * var(--px));
  min-width: 16px;
  min-height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.blaettern:hover { opacity: 1; }
.blaettern.links:hover  { transform: translateY(-50%) translateX(calc(-3 * var(--px))); }
.blaettern.rechts:hover { transform: translateY(-50%) translateX(calc(3 * var(--px))); }

@media (prefers-reduced-motion: reduce) {
  .blaettern, .blaettern:hover { transition: none; }
  .blaettern.links:hover, .blaettern.rechts:hover { transform: translateY(-50%); }
}

/* ==========================================================================
   HANDY UND TABLET  (bis 900 px Fensterbreite)
   --------------------------------------------------------------------------
   Grundgedanke: Das Desktop-Layout bleibt vollständig unangetastet. Hier
   wird die feste Zeichenfläche in eine einspaltige Abfolge umgebaut.

   Die Reihenfolge steht als --mo an jedem Element und wurde aus den
   Desktop-Koordinaten abgeleitet (oben-links nach unten-rechts), also aus
   der tatsächlichen Leserichtung.

   Stellen, an denen Text ÜBER einem Bild liegt, sind im HTML zu Gruppen
   zusammengefasst (.g-hero, .g-band, .g-nacht). Auf dem Desktop sind diese
   Gruppen per "display: contents" unsichtbar und ändern nichts; hier werden
   sie zu echten Abschnitten. So bleibt weißer Text auf seinem dunklen Bild
   und landet nicht unsichtbar auf Weiß.
   ========================================================================== */

@media (max-width: 900px) {

  :root {
    /* Feinjustierung nach Fensterbreite, nach oben und unten begrenzt */
    /* Eine Handy-Einheit: etwa 1 px bei 390 px Fensterbreite, nach oben
       und unten begrenzt. MUSS eine Länge sein — eine einheitenlose Zahl
       lässt sich aus vw nicht ableiten, dann wird jedes calc ungültig. */
    --ms: clamp(0.86px, 100vw / 390, 1.16px);
    --rand: max(20px, 5.5vw);
  }

  html, body { overflow-x: hidden; }

  /* ---------- Die Seite wird eine Spalte ---------- */
  .seite {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto !important;
    overflow: visible;
    padding: 0 var(--rand) calc(64 * var(--ms));
  }

  .seite > .el,
  .seite > .gruppe,
  .seite > .knopf-box,
  .seite > .details { order: var(--mo, 999); }

  .seite > .el,
  .seite > .gruppe {
    position: static;
    left: auto; top: auto; right: auto;
    width: 100%;
    height: auto !important;
    margin: 0 0 calc(24 * var(--ms));
    z-index: auto !important;
  }

  .gruppe { display: block; }

  /* ---------- Medien: Seitenverhältnis aus den Desktop-Maßen ---------- */
  .m-medien {
    position: relative !important;
    aspect-ratio: var(--w) / var(--h);
  }
  .m-medien > img,
  .m-medien > video { width: 100%; height: 100%; object-fit: cover; }

  /* Was auf dem Desktop randlos über die ganze Breite ging, geht das hier
     auch — deshalb der negative Rand. */
  /* Diese Regeln brauchen ".seite >" davor: sonst gewinnt die allgemeine
     Regel ".seite > .el / .gruppe" und setzt Breite und Position zurück. */
  .seite > .m-vollbreit,
  .seite > .g-nacht,
  .seite > .g-band {
    width: calc(100% + 2 * var(--rand));
    margin-left: calc(-1 * var(--rand));
    margin-right: calc(-1 * var(--rand));
  }

  /* ---------- Text ---------- */
  .txt {
    /* Kompressive Skala statt proportionaler Verkleinerung:
       71 px wird zu ~32 px, 21 px zu ~18 px. Sonst wären Überschriften
       riesig oder Fließtext unlesbar klein. */
    font-size: calc((12 + var(--fs) * 0.28) * var(--ms)) !important;
    line-height: 1.34 !important;
    height: auto !important;
    white-space: normal !important;   /* sonst würden Quelltext-Umbrüche zählen */
    display: block;
  }
  .txt.locker { line-height: 1.5 !important; }
  .txt .klein { font-size: calc((12 + var(--fs2) * 0.28) * var(--ms)) !important; }

  /* Feste Zeilenumbrüche aus der Vorlage fließen hier zu Absätzen zusammen */
  .txt p { display: inline; }
  .txt p::after { content: ' '; }
  .txt p.leer, .txt p.leer::after { display: none; content: none; }

  /* Die zeilenweise Enthüllung braucht beschnittene Zeilen — das geht bei
     fließendem Text nicht. Hier blendet der ganze Block sanft ein. */
  .zeilen-auf p { overflow: visible; padding: 0; margin: 0; }
  .zeilen-auf p > span { display: inline; transform: none !important; opacity: 1 !important; transition: none !important; }
  .zeilen-auf.anim { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--kurve), transform 1s var(--kurve); }
  .zeilen-auf.anim.da { opacity: 1; transform: none; }

  /* ---------- Menü ---------- */
  .menue {
    position: fixed;
    left: auto;
    right: calc(var(--rand) - 4px);
    top: max(14px, 3vw);
    width: 40px;
    height: 30px;
    padding: 7px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(6px);
    z-index: 60;
  }
  /* Wunsch der Inhaberin (2026-09-22): Auf der Startseite soll der
     Menue-Knopf am Handy auf derselben Hoehe stehen wie das Logo.
     Gerechnet, nicht geschaetzt: Das Hero ist am Handy 4:5, das Logo sitzt
     bei 4 % dessen Hoehe und ist 42 % der Breite; die sichtbare Schrift im
     PNG liegt bei 45 % der Bildhoehe. Daraus folgt Mitte = 0,22 * Breite.
     Minus 15 px (halbe Knopfhoehe) ergibt den oberen Rand.
     Nur dort, wo es ein Logo GIBT — "about me" und "how I work" haben
     keins und behalten ihren Knopf oben. Kennt ein Browser :has() nicht,
     bleibt einfach alles wie vorher. */
  .seite:has(.m-logo) > .menue { top: calc(22vw - 15px); }

  .menue span { height: 2px; margin-bottom: 6px; background: #fff; }
  .menue.dunkel span { background: #fff; }   /* auf der Kachel immer weiß */

  #menueFlaeche nav { gap: calc(26 * var(--ms)); }
  #menueFlaeche nav a { font-size: calc(30 * var(--ms)); }
  #menueZu { top: max(14px, 3vw); right: var(--rand); width: 44px; height: 44px; font-size: 34px; }

  /* ---------- Rechtliche Links ---------- */
  .recht {
    position: static;
    order: 900;
    margin: calc(26 * var(--ms)) 0 0;
    font-size: calc(14 * var(--ms));
  }

  /* ---------- Gruppen: Text über Bild ----------
     Aufbau: Die Gruppe ist der Rahmen. Das Medium füllt ihn, die Texte
     liegen absolut darüber. Wichtig sind zwei Dinge:
       1. ".seite >" bzw. ".g-… >" davor, sonst gewinnen die allgemeinen
          Spalten-Regeln weiter oben.
       2. top UND bottom zurücksetzen, sonst zieht ein stehengebliebener
          Desktop-Wert das Element in die Länge.
     -------------------------------------------------------------- */

  .seite > .g-hero {
    position: relative;
    aspect-ratio: 4 / 5;          /* auf dem Telefon aufrecht, nicht 16:9 */
    width: calc(100% + 2 * var(--rand));
    margin: 0 calc(-1 * var(--rand)) calc(30 * var(--ms));
    overflow: hidden;
  }
  .seite > .g-nacht {
    position: relative;
    margin-bottom: calc(30 * var(--ms));
    overflow: hidden;
  }

  /* Das Medium füllt seine Gruppe */
  .g-hero > .m-heroclip {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  /* Im Nachtbild bestimmt das Bild die Höhe der Gruppe */
  .g-nacht > .m-medien {
    position: static !important;
    width: 100% !important;
    aspect-ratio: var(--w) / var(--h);
    margin: 0 !important;
  }

  /* Textkinder: absolut über dem Bild. Medien sind ausgenommen. */
  .g-hero > .el:not(.m-medien),
  .g-nacht > .el:not(.m-medien) {
    position: absolute !important;
    left: 6%; right: 6%;
    top: auto; bottom: auto;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }

  /* Feinplatzierung — jeweils mit ".g-… >" für genug Gewicht */
  .g-hero > .m-heroline {
    bottom: 6% !important;
    font-size: calc(14 * var(--ms)) !important;
    line-height: 1.35 !important;
  }
  .g-hero > .m-herotitel { top: 33% !important; }
  .g-hero > .m-herosub   { top: 46% !important; }
  .g-nacht > .m-nacht1   { top: 33% !important; }
  .g-nacht > .m-nacht2   { top: 54% !important; font-size: calc(16 * var(--ms)) !important; }

  .g-nacht > .m-knopftext {
    top: 68% !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%);
    padding: calc(11 * var(--ms)) calc(20 * var(--ms));
    border: 1px solid #fff;
    font-size: calc(13.5 * var(--ms)) !important;
  }
  .g-nacht > .m-knopfrahmen { display: none; }

  /* Das Logo ist ein Medium, wird aber platziert wie ein Text */
  .g-hero > .m-logo {
    position: absolute !important;
    left: 5% !important; right: auto !important;
    top: 4% !important; bottom: auto !important;
    width: 42% !important;
    height: auto !important;
    aspect-ratio: 536 / 482;
    margin: 0 !important;
  }
  .g-hero > .m-logo img { object-fit: contain !important; object-position: left center; }

  /* ---------- Dunkler Balken als eigener Abschnitt ---------- */
  .m-bandflaeche { display: none; }
  .seite > .g-band {
    background: rgba(30, 20, 10, 0.73);
    padding: calc(34 * var(--ms)) var(--rand);
    margin-bottom: calc(30 * var(--ms));
  }
  .g-band > .el {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 calc(20 * var(--ms)) !important;
    text-align: left;
  }
  .g-band > .el:last-child { margin-bottom: 0 !important; }
  .g-band > .m-bandbild { aspect-ratio: 514 / 786; }

  /* Wunsch der Inhaberin (2026-09-22), nur Handy:
     „welcome, I'm isabelle from cologne!" in EINER Zeile, darunter der
     Text viel kleiner, darunter ein Knopf „about me".
     Der Satz braucht 18,05 px Breite pro px Schriftgroesse — der laengste
     aller Einzeiler auf der Seite. Zwei Grenzen wirken gegeneinander:
     --ms hoert bei 0,86 auf zu schrumpfen, der Seitenrand aber bei 20 px.
     Unter ~320 px Breite reicht --ms allein deshalb nicht; die vw-Grenze
     faengt das ab. Geprueft bei 280 / 320 / 375 / 430 px: ueberall
     einzeilig mit mindestens 10 % Luft. */
  .g-band > .m-bandtext > p:not(.klein) {
    display: block;
    font-size: min(calc(16.5 * var(--ms)), 4.3vw) !important;
    white-space: nowrap;
    margin-bottom: calc(10 * var(--ms));
  }
  .g-band > .m-bandtext > p:not(.klein)::after { content: none; }
  .g-band > .m-bandtext > p.klein {
    font-size: calc(13 * var(--ms)) !important;
    line-height: 1.5;
  }
  .g-band > .m-bandtext { margin-bottom: calc(18 * var(--ms)) !important; }

  /* Der Knopf „about me" — nur hier sichtbar, Aufbau wie der helle
     Knopf im Nachtabschnitt (durchsichtig, weisser Rand). */
  .g-band > .m-bandknopf { display: block !important; text-align: left !important; }
  .g-band > .m-bandknopf p { display: inline-block; }
  .g-band > .m-bandknopf p::after { content: none; }
  .g-band > .m-bandknopf a {
    display: inline-block;
    padding: calc(11 * var(--ms)) calc(22 * var(--ms));
    border: 1px solid #fff;
    font-size: calc(13.5 * var(--ms));
  }

  /* Die drei Schritte 01/02/03 stehen untereinander */
  .g-band > .m-bandtitel { text-align: center; margin-bottom: calc(26 * var(--ms)) !important; }
  .g-band > .m-stepnr    { text-align: center; margin-bottom: calc(2 * var(--ms)) !important; }
  .g-band > .m-steptext  { text-align: center; margin-bottom: calc(24 * var(--ms)) !important; }

  /* Wunsch der Inhaberin (2026-09-22): die drei Schritt-Texte sollen am
     Handy JEDER in EINER Zeile stehen. Der laengste ist "create content
     that performs" — er braucht rund 14,6 px Breite pro px Schriftgroesse.
     Bei 17 * --ms bleibt selbst auf 280 px Bildschirmbreite noch ein
     Fuenftel Luft, auch wenn eine Ersatzschrift breiter baut.
     nowrap ist die Absicherung: eine zweite Zeile ist hier nicht erwuenscht.
     Nur Handy/Tablet — der Desktop bleibt bei --fs:36. */
  .g-band > .m-steptext p {
    font-size: calc(17 * var(--ms));
    white-space: nowrap;
  }

  /* ---------- Knöpfe ---------- */
  .m-knopfrahmen { display: none; }
  .seite > .m-knopftext {
    align-self: center;
    width: auto !important;
    padding: calc(13 * var(--ms)) calc(24 * var(--ms));
    border: 1px solid currentColor;
  }

  /* "button.knopf-box" statt ".knopf-box": Die Desktop-Regel nennt das
     Element mit und wiegt deshalb schwerer. */
  button.knopf-box {
    position: static !important;
    width: auto !important;
    height: auto !important;
    align-self: flex-start;
    padding: calc(12 * var(--ms)) calc(18 * var(--ms));
    font-size: calc(15 * var(--ms));
    gap: calc(12 * var(--ms));
    margin: 0 0 calc(16 * var(--ms));
  }
  button.knopf-box svg { width: 12px; height: 12px; }

  /* ---------- Aufklappfenster werden echte Ausklapper ---------- */
  .details {
    position: static !important;
    width: 100% !important;
    max-width: none;
    transform: none !important;
    box-shadow: none;
    display: none;
    margin: 0 0 calc(20 * var(--ms));
    padding: calc(18 * var(--ms)) calc(20 * var(--ms));
    font-size: calc(16 * var(--ms));
  }
  .details.offen { display: block; opacity: 1 !important; pointer-events: auto !important; }
  .details .d-kopf { margin-bottom: calc(10 * var(--ms)); }
  .details li { padding-left: 16px; margin-bottom: 6px; }
  .details li::before { top: 10px; width: 7px; height: 1px; }
  .details .d-extra { margin-top: 12px; padding-top: 10px; }

  /* ---------- Beispiel-Bühne ---------- */
  .auswahl {
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(7 * var(--ms)) calc(18 * var(--ms));
    height: auto !important;
    margin-bottom: calc(14 * var(--ms)) !important;
  }
  .auswahl button { font-size: calc(15 * var(--ms)); }

  /* Höhe in echten Pixeln, damit der Formatwechsel weich überblenden kann —
     aspect-ratio lässt sich nicht animieren. */
  .buehne {
    /* Nach oben begrenzt: sonst wird ein 9:16-Video auf dem Tablet
       höher als der Bildschirm. */
    --bw: min(430px, calc(100vw - 2 * var(--rand)));
    width: 100% !important;
    transition: height 0.85s var(--kurve);
  }
  .buehne.f916 { height: calc(var(--bw) * 861 / 481) !important; }
  .buehne.f23  { height: calc(var(--bw) * 721 / 481) !important; }
  .buehne.f45  { height: calc(var(--bw) * 601 / 481) !important; }

  .clip-marke {
    left: 10px; top: 10px;
    font-size: calc(12 * var(--ms));
    padding: 5px 9px;
    max-width: 72%;
  }
  .ton { right: 10px; bottom: 10px; width: 40px; height: 40px; }
  .ton svg { width: 18px; height: 18px; }
  .blaettern { width: 42px; height: 42px; }
  .blaettern svg { width: 18px; height: 18px; }
  .punkte { bottom: 12px; gap: 8px; }
  .punkte button { width: 7px; height: 7px; }

  /* ---------- Rechtsseiten ---------- */
  .recht-seite { padding: 56px var(--rand) 90px; font-size: 15.5px; }
  .recht-seite h1 { font-size: 28px; margin-bottom: 30px; }
  .recht-seite h2 { font-size: 17px; }
  .recht-seite .zurueck.sprache { float: none; display: block; margin-top: -40px; }
}

/* Gruppen sind auf dem Desktop unsichtbar: kein eigener Kasten, die
   Kinder positionieren sich weiter gegen die Zeichenfläche. */
@media (min-width: 901px) {
  .gruppe { display: contents; }
}

/* ==========================================================================
   TABLET  (601 bis 900 px)
   Dasselbe Fließlayout wie auf dem Telefon, aber in einer mittigen Spalte.
   Ohne das würden Hochformat-Medien höher als der Bildschirm und Text
   über die ganze Breite laufen — beides liest sich schlecht.
   ========================================================================== */
@media (min-width: 601px) and (max-width: 900px) {

  :root { --ms: 1.32px; }

  .seite { align-items: center; }

  /* Inhaltsspalte mittig und begrenzt */
  .seite > .el,
  .seite > .knopf-box,
  .seite > .details { max-width: 470px; }

  /* Bühne und Auswahlliste genau auf --bw, sonst stimmt das
     Seitenverhältnis der Bühne nicht mehr (Höhe rechnet mit --bw). */
  .seite > .auswahl,
  .seite > .buehne { max-width: 430px; }

  .seite > .el.txt { max-width: 560px; }

  /* Randlose Abschnitte bleiben randlos */
  .seite > .m-vollbreit,
  .seite > .g-hero,
  .seite > .g-nacht,
  .seite > .g-band {
    max-width: none;
    align-self: stretch;
  }

  /* Auf dem Tablet wirkt 4:5 zu hoch — hier liegender Hero */
  .seite > .g-hero { aspect-ratio: 3 / 2; }

  /* Der dunkle Balken bekommt innen eine mittige Spalte */
  .seite > .g-band { padding-left: max(var(--rand), calc((100vw - 560px) / 2)); padding-right: max(var(--rand), calc((100vw - 560px) / 2)); }

  /* Texte im Nachtbild dürfen breiter stehen */
  .g-nacht > .el:not(.m-medien) { left: 12%; right: 12%; }
  .g-hero  > .el:not(.m-medien) { left: 12%; right: 12%; }
  .g-hero > .m-logo { width: 30% !important; }
  /* Auf dem Tablet ist das Hero 3:2 und das Logo 30 % breit — daraus
     ergibt sich eine andere Logo-Mitte als am Handy: 0,1481 * Breite.
     Nachgemessen bei 620 und 768 px. */
  .seite:has(.m-logo) > .menue { top: calc(14.81vw - 15px); }
}

/* ==========================================================================
   Pakete als eigenständige Blöcke ("how I work")
   Eine feine Linie über jedem Paket — ohne sie liest sich die Liste als
   ein Textklumpen. Über dem ersten Paket keine Linie, da beginnt der
   Abschnitt ohnehin.
   ========================================================================== */
/* Die Trennlinien über den Paketen gelten NUR auf dem Handy — siehe
   Handy-Block weiter unten. Am Desktop bleibt das Layout unverändert. */

@media (max-width: 900px) {
  /* Auf dem Handy als echter Rahmen oben, mit Luft darüber */
  .seite > .pkt-titel {
    position: relative !important;
    border-top: 1px solid rgba(0, 0, 0, 0.13);
    padding-top: calc(30 * var(--ms));
    margin-bottom: calc(5 * var(--ms)) !important;
  }
  .seite > .pkt-titel::before { display: none; }
  .seite > .pkt-titel.erste { border-top: 0; padding-top: 0; }

  /* Titel dicht an seinem Satz, Knopf mit Luft zum nächsten Paket */
  .seite > .pkt-text { margin-bottom: calc(16 * var(--ms)) !important; }
  .seite > button.knopf-box { margin-bottom: calc(46 * var(--ms)) !important; }

  /* Der Nachtbereich braucht auf dem Telefon mehr Höhe für drei Zeilen */
  .seite > .g-nacht { aspect-ratio: 1 / 1; }
  .g-nacht > .m-medien { aspect-ratio: auto !important; position: absolute !important; inset: 0; height: 100% !important; }
  .g-nacht > .m-nacht1 {
    top: 17% !important;
    font-size: calc(19 * var(--ms)) !important;
    line-height: 1.32 !important;
  }
  /* Hier bleiben die Umbrüche erhalten, sonst werden es drei Zeilen */
  .g-nacht > .m-nacht1 p { display: block; }
  .g-nacht > .m-nacht1 p::after { content: none; }
  .g-nacht > .m-nacht2 { top: 45% !important; font-size: calc(15 * var(--ms)) !important; }
  .g-nacht > .m-knopftext { top: 60% !important; }
}

/* ==========================================================================
   Sichtbarkeit je Gerät
   ========================================================================== */
.nur-handy { display: none; }                 /* Umbrüche nur auf dem Handy */

@media (min-width: 901px) {
  .nur-handy-zeile { display: none; }         /* E-Mail nur auf dem Handy   */
}

/* ==========================================================================
   NUR HANDY: Anpassungen auf „how I work" (2026-09-22)
   Ausdrücklicher Wunsch: Diese Änderungen gelten allein für die
   Handy-Fassung. Das Desktop-Layout bleibt unverändert.
   ========================================================================== */
@media (max-width: 900px) {

  br.nur-handy { display: inline; }           /* Umbrüche hier aktiv        */
  .nur-desktop { display: none !important; }  /* die drei Fotos entfallen   */
  /* !important nötig: die Regel ".txt p { display: inline }" weiter oben
     nennt ein Element mit und wiegt sonst schwerer. */
  .nur-desktop-zeile { display: none !important; }
  .nur-handy-zeile { display: block !important; }

  /* Banner-Satz kleiner, dazu der Umbruch oben */
  .g-hero > .m-herosub {
    font-size: calc(22 * var(--ms)) !important;
    line-height: 1.22 !important;
    top: 44% !important;
  }
  .g-hero > .m-herosub p { display: block; }
  .g-hero > .m-herosub p::after { content: none; }

  /* „explore my tailored…" deutlich kleiner — sonst stehen dort
     gleich drei Zeilen Text am Seitenanfang. */
  .seite > .m-explore {
    font-size: calc(14.5 * var(--ms)) !important;
    line-height: 1.45 !important;
  }

  /* „(content perfect for instagram…)" — kleiner und mittig.
     Auf dem Desktop steht die Zeile linksbuendig in einem 788 breiten
     Kasten; am Handy wirkt das wie ein Versatz, deshalb hier zentriert. */
  .seite > .m-paketsub {
    font-size: calc(14.5 * var(--ms)) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  /* Pakete: Titel dicht an seinem Satz, graue Texte kleiner,
     deutlich Luft zwischen den Paketen, feine Trennlinie darüber. */
  .seite > .pkt-titel {
    position: relative !important;
    border-top: 1px solid rgba(0, 0, 0, 0.13);
    padding-top: calc(32 * var(--ms));
    margin-bottom: calc(4 * var(--ms)) !important;
  }
  .seite > .pkt-titel.erste { border-top: 0; padding-top: 0; }
  .seite > .pkt-text {
    font-size: calc(14.5 * var(--ms)) !important;
    line-height: 1.45 !important;
    margin-bottom: calc(18 * var(--ms)) !important;
  }
  .seite > button.knopf-box { margin-bottom: calc(52 * var(--ms)) !important; }

  /* „beautiful isn't enough." — mehr Abstand nach oben, zwei Zeilen */
  .seite > .m-beautiful-titel {
    margin-top: calc(44 * var(--ms));
    line-height: 1.22 !important;
  }
  .seite > .m-beautiful-titel p > span { display: block; }
  /* Der Absatz darunter viel kleiner */
  .seite > .m-beautiful-text {
    font-size: calc(14.5 * var(--ms)) !important;
    line-height: 1.5 !important;
    margin-bottom: calc(32 * var(--ms)) !important;
  }

  /* Bildnachweis „*the fontenay. hamburg, germany": klein, rechts,
     einzeilig und DICHT unter dem Nachtbild — sonst liest er sich wie
     eine eigene Aussage statt als Beschriftung des Bildes darueber.
     Der negative obere Rand frisst den 24er Abstand der Gruppe auf. */
  .seite > .m-bildquelle {
    font-size: calc(11 * var(--ms)) !important;
    line-height: 1.3 !important;
    text-align: right !important;
    margin-top: calc(-17 * var(--ms));
    margin-bottom: calc(40 * var(--ms)) !important;
  }
  .seite > .m-bildquelle p { white-space: nowrap; }

  /* „my approach?" und „and how?" (Startseite): die Erklaerungen gehoeren
     UNTER den Titel, nicht in dieselbe Zeile — und sie sind hellgrau und
     kleiner, wie alle Erklaertexte am Handy.
     Der Titel wird dafuer ein Block; die beiden .klein-Absaetze bleiben
     inline und fliessen so zu EINEM Absatz zusammen, statt an den festen
     Zeilenumbruechen der Vorlage zu brechen.
     Nur Handy/Tablet — am Desktop bleiben die Zeilen wie in Figma. */
  .seite > .m-ansatz > p:not(.klein) { display: block; }
  .seite > .m-ansatz > p:not(.klein)::after { content: none; }
  .seite > .m-ansatz > p.klein {
    color: #777;
    font-size: calc(13.5 * var(--ms)) !important;
  }

  /* Drei Sterne als Trenner zwischen "every hotel has its own story." und
     "my approach?" — nur am Handy, wo beide Bloecke sonst aufeinander
     stossen. Die Leerzeichen im Text statt letter-spacing: so bleibt der
     Trenner exakt mittig (letter-spacing haengt auch hinter dem letzten
     Zeichen und verschiebt die Mitte). */
  .seite > .m-sterne {
    display: block !important;
    text-align: center !important;
    font-size: calc(15 * var(--ms)) !important;
    color: #777;
    margin: calc(16 * var(--ms)) 0 calc(30 * var(--ms)) !important;
  }
  .seite > .m-sterne p::after { content: none; }

  /* ---------- Referenzen: Name klein ueber dem Bild, Bilder als Raster ----
     Wunsch der Inhaberin (2026-09-22), nur Handy. Der Hotelname stand vorher
     gross und dreizeilig ueber den Bildern und las sich wie eine eigene
     Ueberschrift. Jetzt klein, linksbuendig und dicht darueber — damit
     erkennbar ist, dass er zu den Bildern gehoert. */
  .seite > .m-hotelname {
    font-size: calc(12.5 * var(--ms)) !important;
    line-height: 1.35 !important;
    text-align: left !important;
    margin-bottom: calc(7 * var(--ms)) !important;
  }
  .seite > .m-hotelname p { display: block; }
  .seite > .m-hotelname p::after { content: none; }

  /* Beschreibung UNTER den Bildern: klein, rechts, dicht dran.
     Anders als .m-bildquelle darf dieser Satz umbrechen — er ist zu lang
     fuer eine Zeile. */
  .seite > .m-bildtext {
    font-size: calc(11 * var(--ms)) !important;
    line-height: 1.4 !important;
    text-align: right !important;
    margin-top: calc(-16 * var(--ms));
    margin-bottom: calc(34 * var(--ms)) !important;
  }

  /* Sevilla: drei Fotos links untereinander, das Video rechts daneben.
     Die Spaltenbreiten sind so gerechnet, dass die drei Fotos samt
     Zwischenraeumen genauso hoch werden wie das Video:
     Fotos 222/347 und 2x 222/333, Video 563/812 — daraus folgt ein
     Verhaeltnis von 1 : 3,3. Bei anderen Bildmaszen neu rechnen. */
  .seite > .g-sevilla {
    display: grid !important;
    grid-template-columns: 1fr 3.3fr;
    gap: calc(8 * var(--ms));
    align-items: stretch;
  }
  .g-sevilla > .el {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    top: auto; left: auto; right: auto;
  }
  .g-sevilla > .m-sev-foto  { grid-column: 1; }
  .g-sevilla > .m-sev-video { grid-column: 2; grid-row: 1 / span 3; }
  .g-sevilla > .m-sev-video video { height: 100%; }

  /* Die drei Sommer-Clips: am Handy stehen nur ZWEI nebeneinander, der
     mittlere ist ueber "nur-desktop" ausgeblendet (Wunsch der Inhaberin
     2026-09-23). Dadurch hat das Raster genau zwei Kinder. */
  .seite > .g-sommer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: calc(8 * var(--ms));
  }
  .g-sommer > .el {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    top: auto; left: auto; right: auto;
  }

  /* Die vier Essensfotos als 2x2-Collage — so sind alle vier auf einen
     Blick zu sehen, statt vier Mal untereinander zu scrollen. */
  .seite > .g-essen {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: calc(8 * var(--ms));
  }
  .g-essen > .el {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    top: auto; left: auto; right: auto;
  }

  /* Der Fuss ist seit 2026-09-23 am DESKTOP zentriert (Klasse "mitte").
     Am Handy soll er linksbuendig bleiben wie bisher — deshalb hier
     zurueckgesetzt. Ohne das waere die Handy-Fassung mitgewandert. */
  .seite > .m-fuss-titel,
  .seite > .m-fuss-studio,
  .seite > .m-fuss-mail { text-align: left !important; }

  /* Fuss: Studioname zweizeilig (die beiden Quellzeilen bleiben Zeilen),
     E-Mail deutlich kleiner und in EINER Zeile. */
  .seite > .m-fuss-studio {
    font-size: calc(15 * var(--ms)) !important;
    line-height: 1.4 !important;
    margin-bottom: calc(14 * var(--ms)) !important;
  }
  .seite > .m-fuss-studio p { display: block; }
  .seite > .m-fuss-mail {
    font-size: calc(13.5 * var(--ms)) !important;
    line-height: 1.35 !important;
  }
  .seite > .m-fuss-mail p { white-space: nowrap; }
}