/* ==========================================================================
   stil.css — die gesamte Gestaltung der Website

   AUFBAU DIESER DATEI
   1. Schriften          (lokal aus gestaltung/schriften/)
   2. Farben und Maße    <- hier ändert man Farben, sonst nirgends
   3. Grundlagen
   4. Kopf und Fuß
   5. Seitenbausteine
   6. Bilder
   7. Handy und Tablet

   WAS DU GEFAHRLOS ÄNDERN KANNST: die Werte im Block "Farben und Maße".
   Alles andere bitte nur gemeinsam.
   ========================================================================== */

/* ===== 1. Schriften =======================================================
   Die Dateien liegen in gestaltung/schriften/ und werden vom eigenen Server
   geladen — keine Verbindung zu Google. Genau deshalb braucht diese Website
   kein Cookie-Banner.
   Fehlen die Dateien, greift automatisch die Ersatzschrift in der Zeile
   font-family weiter unten. Die Seite bleibt also immer lesbar.
   ========================================================================== */
@font-face {
  font-family: "Marcellus";
  src: url("schriften/marcellus.woff2") format("woff2"),
       url("schriften/marcellus.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("schriften/barlow.woff2") format("woff2"),
       url("schriften/barlow.ttf") format("truetype");
  font-weight: 200 500; font-style: normal; font-display: swap;
}
/* ==========================================================
   CHIARA — Richtung 2 „Reportage", Ausbaustufe 2
   Mehrseitig über Hash-Router. Startseite trägt nur
   Aufmacher, Bildreihe, Leistungsübersicht und Kontakt.
   Bewusst einthemig hell.
   ========================================================== */

/* ===== 2. Farben und Maße =================================================
   Hier und nur hier werden Farben geändert. Jeder Wert wirkt überall.
   ========================================================================== */
:root{
  --paper: #FFFFFF;
  --tint:  #F4F2EE;
  --ink:   #131211;
  --mute:  #797369;
  --line:  #E7E2DA;
  --stone: #9A8F7F;

  --maxw: 1240px;
  --read: 620px;
  --gut: clamp(18px, 4vw, 48px);
  --kopf: 92px;
  color-scheme: light;
}
/* ===== 3. Grundlagen ===== */
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Barlow", Helvetica, Arial, sans-serif;
  font-size:15.5px; line-height:1.78; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:"Marcellus", Georgia, serif; font-weight:400; line-height:1.14; text-wrap:balance; }
a{ color:inherit; }
img{ max-width:100%; }
:where(a,button,input,textarea,select):focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.read{ max-width:var(--read); }
.read.mid{ margin-inline:auto; text-align:center; }

.kicker{ font-size:10px; font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--stone); }
.copy{ color:var(--mute); }
.copy.ink{ color:var(--ink); }
.tlink{ display:inline-block; font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:6px; }
.tlink:hover{ color:var(--stone); border-color:var(--stone); }
.btn{
  display:inline-block; font-family:"Barlow",sans-serif;
  font-size:10.5px; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  padding:15px 34px; text-decoration:none; cursor:pointer; transition:opacity .18s ease;
}
.btn:hover{ opacity:.82; }
.btn.line{ background:transparent; color:var(--ink); }
.btn.line:hover{ background:var(--ink); color:var(--paper); opacity:1; }

/* ===== 4. Kopf und Fuß ===== */
/* ---------- Kopf ---------- */
.bar{ position:sticky; top:0; z-index:60; background:transparent;
  transition:background .25s ease, border-color .25s ease; border-bottom:1px solid transparent; }
.bar.solid{ background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom-color:var(--line); }
.bar-in{ display:flex; align-items:center; gap:26px; height:var(--kopf); }
.wm{ display:inline-flex; align-items:center; margin-right:auto; text-decoration:none; }
.wm img{ height:60px; width:auto; display:block; transition:opacity .2s ease; }
.wm:hover img{ opacity:.82; }
.wm .wm-h{ display:none; }
footer .wm img{ height:80px; }
.bar nav{ display:flex; gap:24px; }
.bar nav a{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
  text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent; }
.bar nav a:hover{ color:var(--ink); }
.bar nav a.on{ color:var(--ink); border-bottom-color:var(--stone); }
.menu-btn{ display:none; background:none; border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:10px; letter-spacing:.26em; text-transform:uppercase; padding:9px 13px; cursor:pointer; }

/* Heller Kopf, solange er auf einem DUNKLEN Aufmacher liegt.
   Trägt der Körper die Klasse „kopf-dunkel“ (helles Aufmacherbild, siehe
   inhalt/startseite.txt), greifen diese Regeln nicht — dann bleibt der Kopf
   dunkel, weil weiße Schrift auf hellem Foto nicht lesbar wäre. */
body:not(.kopf-dunkel) .bar:not(.solid) .wm .wm-d{ display:none; }
body:not(.kopf-dunkel) .bar:not(.solid) .wm .wm-h{ display:block; }
body:not(.kopf-dunkel) .bar:not(.solid) nav a{ color:rgba(255,255,255,.82); }
body:not(.kopf-dunkel) .bar:not(.solid) nav a:hover,
body:not(.kopf-dunkel) .bar:not(.solid) nav a.on{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }
body:not(.kopf-dunkel) .bar:not(.solid) .btn.line{ color:#fff; border-color:rgba(255,255,255,.6); }
body:not(.kopf-dunkel) .bar:not(.solid) .btn.line:hover{ background:#fff; color:var(--ink); border-color:#fff; }
body:not(.kopf-dunkel) .bar:not(.solid) .menu-btn{ color:#fff; border-color:rgba(255,255,255,.5); }

/* ===== 5. Seitenbausteine ===== */
/* ---------- Seitenrahmen ---------- */
.page[hidden]{ display:none !important; }
.inner{ padding-block: clamp(30px,4.4vw,54px) clamp(50px,7vw,96px); }
.crumbs{ display:flex; gap:9px; align-items:center; margin-bottom:22px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); }
.crumbs a{ text-decoration:none; color:var(--stone); }
.crumbs a:hover{ color:var(--ink); }

h1.big{ font-size:clamp(34px, 5.4vw, 66px); letter-spacing:.01em; }
h1.big span{ display:block; color:var(--stone); }
h2.ch{ font-size:clamp(26px,3.6vw,44px); }
h3.sub{ font-size:26px; margin-bottom:16px; }

.block{ margin-top: clamp(38px,5.4vw,72px); }
.rule-top{ border-top:1px solid var(--line); padding-top: clamp(28px,3.8vw,48px); }

/* ---------- Vollflächiger Aufmacher ---------- */
.hero{ position:relative; width:100%; height:clamp(440px, 82vh, 820px);
  margin-top:calc(var(--kopf) * -1); display:flex; align-items:flex-end; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to top, rgba(20,18,16,.74) 0%, rgba(20,18,16,.46) 34%, rgba(20,18,16,0) 74%),
    linear-gradient(to bottom, rgba(20,18,16,.38) 0%, rgba(20,18,16,0) 28%);
}
.hero-title{ position:relative; z-index:3; width:100%;
  padding-bottom:clamp(34px,5vw,66px); color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:clamp(20px,3vw,48px); align-items:end; }
.hero-title .kicker{ color:rgba(255,255,255,.78); }
.hero-title .copy{ color:rgba(255,255,255,.9); }
.hero-sub{ max-width:40ch; padding-bottom:8px; }

/* ---------- Heller Aufmacher ----------
   Für ein helles Foto: der Verlauf zieht nach Weiß statt nach Schwarz,
   die Schrift wird dunkel. Geschaltet über „Heller Aufmacher: ja“ in
   inhalt/startseite.txt. Sonst ändert sich am Aufbau nichts. */
.hero.hell::after{
  background:
    linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,0) 62%),
    linear-gradient(to bottom, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 22%);
}
.hero.hell .hero-title{ color:var(--ink); }
/* Die kleine Zeile steht hier dunkel statt im Steinton: sie läuft quer übers
   Bild und muss auch über einer dunklen Stelle im Foto lesbar bleiben. */
.hero.hell .hero-title .kicker{ color:var(--ink); }
.hero.hell .hero-title .copy{ color:var(--mute); }
.hero.hell .hero-sub .gr{ color:var(--ink); }
.hero.hell .hero-sub .copy b{ color:var(--ink); }
.scroll-note{ margin-top:18px; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* ---------- Arbeitsfelder auf der Startseite ---------- */
.felder{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.5vw,18px); }
.feld{ display:flex; flex-direction:column; gap:10px; text-decoration:none; }
.feld h2{ font-size:20px; }
.feld .nr{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--stone); }
.hero-sub .gr{ display:block; font-family:"Marcellus",Georgia,serif; font-size:20px;
  letter-spacing:.04em; color:#fff; margin-bottom:10px; }
.hero-sub .copy b{ font-weight:400; color:#fff; }

/* ---------- Offener Punkt ---------- */
.offen{ border:1px dashed var(--line); padding:clamp(22px,3vw,34px); }
.offen p{ color:var(--mute); max-width:62ch; }
.offen .marke{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--stone); margin-bottom:12px; }

/* ---------- Kapitel ---------- */
.ch-head{ display:grid; grid-template-columns: 120px minmax(0,1fr); gap:clamp(18px,3vw,44px); align-items:start;
  padding-bottom:clamp(24px,3.6vw,40px); }
.ch-no{ font-family:"Marcellus",Georgia,serif; font-size:15px; letter-spacing:.2em; color:var(--stone); padding-top:8px; }
.ch-head .copy{ margin-top:14px; max-width:58ch; }

/* ---------- Bildraster ---------- */
.duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.8vw,20px); align-items:start; }
.duo.offset > :last-child{ margin-top:clamp(24px,5vw,72px); }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,20px); }
.quad{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.8vw,20px); }
figure{ margin:0; }
.cap{ margin-top:10px; font-size:11.5px; letter-spacing:.06em; color:var(--mute); }
.cap b{ font-weight:400; color:var(--ink); }
.cap .nr{ font-family:"Marcellus",Georgia,serif; color:var(--stone); margin-right:8px; }
.full{ width:100%; height:clamp(280px,44vw,520px); position:relative; }

/* ---------- Arbeitsfelder als Zeilen ---------- */
.svc{ display:flex; flex-direction:column; }
.svc a{ display:grid; grid-template-columns: 150px minmax(0,1fr) auto; gap:clamp(18px,3vw,40px);
  align-items:center; text-decoration:none; padding:clamp(16px,2.4vw,24px) 0; border-bottom:1px solid var(--line); }
.svc a:first-child{ border-top:1px solid var(--line); }
.svc h3{ font-size:26px; }
.svc p{ font-size:14px; color:var(--mute); margin-top:6px; max-width:52ch; }
.svc .from{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); white-space:nowrap; }

/* ---------- Arbeitsfelder als Raster, zwei nebeneinander ---------- */
.felder2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.kat{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:clamp(14px,1.8vw,22px);
  align-items:start; text-decoration:none; padding:clamp(22px,2.8vw,32px) 0;
  border-bottom:1px solid var(--line); }
.kat:nth-child(1), .kat:nth-child(2){ border-top:1px solid var(--line); }
.kat:nth-child(2n+1){ padding-right:clamp(22px,3.4vw,44px); }
.kat:nth-child(2n){ padding-left:clamp(22px,3.4vw,44px); border-left:1px solid var(--line); }
/* Titel und Preis nebeneinander. Auf sehr schmalen Geräten rutscht der Preis
   unter den Titel, statt seitlich aus dem Bild zu laufen (flex-wrap). */
.kat-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.kat h3{ font-size:24px; }
.kat .from{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); white-space:nowrap; }
.kat p{ font-size:14px; color:var(--mute); margin-top:8px; }

/* ---------- Listen, Tabellen ---------- */
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,72px); align-items:start; }
.two.tight{ grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.stack{ display:flex; flex-direction:column; gap:14px; }
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ padding:10px 0 10px 22px; position:relative; border-bottom:1px solid var(--line); font-size:14.5px; }
.ticks li::before{ content:""; position:absolute; left:0; top:1.15em; width:10px; height:1px; background:var(--stone); }
.rows{ display:flex; flex-direction:column; }
.row{ display:grid; grid-template-columns:1fr auto; gap:22px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line); }
.row:first-child{ border-top:1px solid var(--line); }
.row .n{ font-size:15.5px; }
.row .n em{ display:block; font-style:normal; font-size:13px; color:var(--mute); }
.row .a{ font-family:"Marcellus",Georgia,serif; font-size:21px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hint{ font-size:12.5px; color:var(--mute); }

/* ---------- Zitat ---------- */
.pull{ background:var(--tint); padding-block:clamp(52px,7vw,96px); }
.pull p{ font-family:"Marcellus",Georgia,serif; font-size:clamp(24px,3.4vw,40px); line-height:1.32; }
.pull span{ display:block; margin-top:22px; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--stone); }

/* ---------- Blätterung ---------- */
.pager{ display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  margin-top:clamp(36px,5vw,60px); padding-top:22px; border-top:1px solid var(--line); }
.pager .sp{ margin-left:auto; }

/* ---------- Formular ---------- */
form{ display:grid; gap:18px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label{ display:flex; flex-direction:column; gap:8px; }
label span{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone); }
input,select,textarea{
  font-family:"Barlow",sans-serif; font-size:15px; font-weight:300; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:0; padding:12px 14px; width:100%;
}
input:focus,select:focus,textarea:focus{ border-color:var(--ink); outline:none; }
textarea{ min-height:104px; resize:vertical; }

/* ---------- Rechtstexte ---------- */
.legal{ max-width:68ch; }
.legal h3{ font-size:20px; margin:28px 0 8px; }
.legal p{ font-size:15px; margin-top:8px; }
.legal .ph-txt{ color:var(--stone); }

/* ---------- Fuß ---------- */
footer{ border-top:1px solid var(--line); }
.foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(22px,3vw,44px); padding:clamp(42px,6vw,68px) 0 30px; }
.foot h4{ margin:0 0 14px; font-family:"Barlow",sans-serif; font-size:10px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--stone); }
.foot a{ display:block; padding:4px 0; font-size:14px; color:var(--mute); text-decoration:none; }
.foot a:hover{ color:var(--ink); }
.foot .about{ font-size:14px; color:var(--mute); max-width:32ch; margin-top:14px; }
.foot-end{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:16px 0 38px; border-top:1px solid var(--line); }
.foot-end small{ font-size:12px; color:var(--mute); }
.stamp{ margin-left:auto; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--stone);
  border:1px solid var(--line); padding:6px 12px; }

/* ===== 7. Handy und Tablet ===== */
@media (max-width: 900px){
  .bar nav{ display:none; position:absolute; left:0; right:0; top:var(--kopf); flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:4px var(--gut) 16px; }
  .bar nav.open{ display:flex; }
  .bar nav a{ padding:13px 0; font-size:13px; border-bottom:1px solid var(--line); }
  .bar nav.open a{ color:var(--mute); }
  .bar nav.open a:hover, .bar nav.open a.on{ color:var(--ink); }
  .menu-btn{ display:inline-block; }
  .bar .btn{ display:none; }
  .hero-title{ grid-template-columns:1fr; align-items:start; }
  /* Auf dem Handy ist der Aufmacher flacher. Sonst wird ein quer
     aufgenommenes Bild bis zur Unkenntlichkeit seitlich beschnitten. */
  .hero{ height:clamp(380px, 62vh, 620px); }
  .ch-head{ grid-template-columns:1fr; }
  .felder{ grid-template-columns:repeat(3,1fr); }
  /* minmax(0,1fr), nicht 1fr: Ein reines 1fr darf sich von seinem Inhalt
     aufblähen lassen. Eine lange E-Mail-Adresse schob so die ganze
     Anfrageseite seitlich aus dem Handybild. */
  .two, .two.tight{ grid-template-columns:minmax(0,1fr); }
  .svc a{ grid-template-columns:110px minmax(0,1fr); }
  .felder2{ grid-template-columns:1fr; }
  .kat:nth-child(2n), .kat:nth-child(2n+1){ padding-left:0; padding-right:0; border-left:0; }
  .kat:nth-child(2){ border-top:0; }
  .svc .from{ grid-column:2; }
  .quad{ grid-template-columns:repeat(2,1fr); }
  .foot{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .duo,.trio{ grid-template-columns:1fr; }
  .felder{ grid-template-columns:repeat(2,1fr); }
  .duo.offset > :last-child{ margin-top:0; }
  .quad{ grid-template-columns:1fr; }
  .svc a{ grid-template-columns:1fr; }
  .svc .from{ grid-column:1; }
  .f2{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* ===== 6. Bilder ==========================================================
   Alle Bilder werden formatfüllend beschnitten (object-fit: cover).
   Welches Seitenverhältnis ein Platz hat, steht hier — nicht im HTML.
   ========================================================================== */

/* Aufmacher über die volle Breite.
   Welcher Ausschnitt zu sehen ist, steht in inhalt/startseite.txt und kommt
   als --aus (Rechner) und --aus-handy (Handy) am Bild an. Grund für zwei
   Werte: quer aufgenommene Bilder werden auf dem Handy seitlich stark
   beschnitten — dort muss man den Ausschnitt anders legen. */
.hero-bild{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: var(--aus, 50% 50%); }
@media (max-width: 760px){
  .hero-bild{ object-position: var(--aus-handy, var(--aus, 50% 50%)); }
}

/* Galeriebilder: hochkant 2:3, so kommen Chiaras Aufnahmen ungeschnitten durch */
.duo img, .trio img, .quad img, .felder img{
  display:block; width:100%; aspect-ratio:2/3; object-fit:cover;
}
/* Studio-Bilder sind Handyaufnahmen im Format 3:4 */
.quad img{ aspect-ratio:3/4; }
/* Einzelne Formate */
.bild-hoch{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover; }
.bild-quer{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.full{ width:100%; height:clamp(280px,44vw,520px); position:relative; overflow:hidden; }
.full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Kachelbilder der Übersichtsseiten */
.kat img{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover; transition:opacity .2s ease; }
.feld img{ transition:opacity .2s ease; }
/* Nur echte Verknüpfungen reagieren auf die Maus. Eine gesperrte Kachel ist
   ein <div> und bleibt deshalb ruhig — siehe "Gesperrte Seiten" weiter unten. */
a.kat:hover img, a.feld:hover img{ opacity:.86; }

/* ===== Gesperrte Seiten ===================================================
   Eine Leistung mit "Sichtbar: nein" ist keine Verknüpfung, sondern nur Text.

   Auf Startseite und Foto-Übersicht sieht sie genauso aus wie jede andere —
   Bild in Farbe, Titel, Preis. Das Angebot gibt es ja, nur die Unterseite
   fehlt noch. Die einzigen Unterschiede dort sind stumm: Der Mauszeiger bleibt
   ein Pfeil, und beim Darüberfahren passiert nichts. So verspricht nichts
   einen Klick, den es noch nicht gibt.

   Die Fußzeile ist die Ausnahme. Sie ist das Inhaltsverzeichnis der Seite,
   und dort soll ablesbar bleiben, was noch nicht fertig ist.
   ========================================================================== */
.feld.aus, .kat.aus{ cursor:default; }

/* Nur im Fuß: zurückgenommen und mit Hinweis. */
.foot-aus{ display:block; padding:4px 0; font-size:14px; color:var(--line2, #c9c4b9); }
.foot-aus em{ font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }

/* ===== Platzhalter ========================================================
   Alles, was in [eckigen Klammern] steht, wird farbig hervorgehoben.
   So sieht man auf einen Blick, was vor dem Livegang noch fehlt.
   Sobald die Klammern weg sind, verschwindet auch die Farbe.
   ========================================================================== */
.offen-wert{ color:var(--stone); }

/* ===== Kasten für die Terminbuchung ======================================= */
/* ---------- Anfrageseite ----------
   Oben ein flaches Band aus Text und kleinem Porträt, darunter der Kalender
   über die volle Breite. Das Band ist absichtlich niedrig: Der Kalender soll
   auf einem normalen Bildschirm ohne Scrollen angeschnitten sein, damit klar
   ist, dass hier gebucht wird. */
.anfrage-kopf{
  display:grid; grid-template-columns:minmax(0,1fr) 210px;
  gap:clamp(24px,4vw,56px); align-items:start;
  padding-bottom:clamp(28px,3.6vw,44px);
}
.portraet-klein{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
/* Kontaktzeilen hier schmaler und enger als sonst — sie sollen Platz lassen */
.rows-knapp{ max-width:420px; }
.rows-knapp .row{ padding:11px 0; }
/* Am Handy rutscht das Porträt unter den Text und wird deutlich kleiner,
   damit der Kalender nicht nach unten geschoben wird. Diese Regel steht
   bewusst hier und nicht im Handy-Abschnitt weiter oben: Der Block
   „6. Bilder“ kommt in dieser Datei danach und würde sie sonst überschreiben. */
@media (max-width: 900px){
  .anfrage-kopf{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .portraet-klein{ width:128px; }
}

.buchung{ border:1px dashed var(--line); padding:clamp(22px,3vw,32px); }
.buchung .marke{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--stone); margin-bottom:12px; }
.buchung .btn{ margin-top:18px; }
.buchung iframe{ display:block; width:100%; }

/* Der Kasten über die volle Seitenbreite. Vor dem Klick mittig und
   einladend, nach dem Klick (Klasse "geladen") ohne Rahmen und Abstand,
   damit der Kalender die ganze Breite nutzt. */
.buchung-breit{ width:100%; }
.buchung-einladung{ text-align:center; max-width:52ch; margin-inline:auto; }
.buchung-einladung .hint{ margin-top:14px; }
.buchung-breit.geladen{ border:0; padding:0; }
.code{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12.5px;
  background:var(--tint); padding:12px 14px; margin:14px 0 0; overflow-x:auto; }

/* Kleine Werte in den Angabenzeilen (E-Mail, Instagram, Ort) */
/* Kontaktzeilen (E-Mail, Instagram) statt Preisen. Preise sollen nicht
   umbrechen, eine lange E-Mail-Adresse muss es dürfen — sonst schiebt sie
   auf dem Handy die ganze Seite seitlich hinaus. */
.row .a.klein{ font-size:16px; white-space:normal; overflow-wrap:anywhere; }

/* Fehlerseite */
.fehlerseite main{ min-height:50vh; }