/* ============================================================
   BUCCODESIGN – Kunstgalerie
   Galerie-Weiß: die Werke stehen im Mittelpunkt
   ============================================================ */

/* ---------- Schriften lokal (DSGVO-konform) ---------- */
@font-face { font-family:'Cormorant Garamond'; font-weight:400; font-display:swap;
  src:url('../fonts/CormorantGaramond-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-weight:500; font-display:swap;
  src:url('../fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-weight:600; font-display:swap;
  src:url('../fonts/CormorantGaramond-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap;
  src:url('../fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap;
  src:url('../fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap;
  src:url('../fonts/Inter-600.woff2') format('woff2'); }

/* ---------- Design-Tokens ---------- */
:root {
  /* Die Seite existiert nur hell. Verhindert, dass Browser mit
     erzwungenem Dunkelmodus die Farben der Bilder verfaelschen. */
  color-scheme: only light;

  --paper:  #FDFAF5;    /* warmes Elfenbein statt kaltem Weiß */
  --shell:  #F5EEE4;    /* warmer Sandton */
  --ink:    #241E18;    /* warmes Dunkelbraun statt Schwarz */
  --ink-soft: #6B6055;  /* weiches Graubraun */
  --line:   #E5DACB;
  --accent: #A96F45;    /* Terrakotta, etwas kräftiger und wärmer */
  --sold:   #B3261E;
  --free:   #2E7D32;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --maxw:   1240px;
  --r:      4px;        /* fast eckig – wie ein Bilderrahmen */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.65; font-size: 16px; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { padding: 110px 0; }
.section-shell { background: var(--shell); }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin-bottom: 18px;
}
.section-intro { max-width: 620px; color: var(--ink-soft); font-size: 17px; }
.center { text-align: center; }
.center .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; letter-spacing: .6px;
  padding: 15px 32px; border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #000; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding .3s, border-color .3s;
}
/* Weichzeichner liegt bewusst auf dem ::before und NICHT auf .site-header:
   backdrop-filter auf dem Element selbst macht es zum Bezugsrahmen fuer
   position:fixed-Kinder - dann klebt das Handy-Menue in der Kopfzeile fest. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(253,250,245,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header.scrolled { padding: 14px 28px; border-bottom-color: var(--line); }
.brand { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: 2px; }
.brand small {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: 3.5px; font-weight: 500; color: var(--ink-soft); margin-top: -3px;
}
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 1.5px; background: var(--ink); }
/* Nur fuer die Handy-Schublade - am Rechner ausgeblendet */
.nav-kopf, .nav-cta, .nav-schleier { display: none; }

/* ---------- Galerie-Raster (Struktur nach Vorbild einer Kunstgalerie) ---------- */
.galerie-einleitung { max-width: 62ch; margin: 26px 0 34px; }
.galerie-einleitung p { color: var(--ink-soft); margin-bottom: 14px; }
.galerie-einleitung p:first-child { color: var(--ink); font-size: 20px; }

.werke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 60px 34px;
  margin-top: 52px;
}
.werk figure { position: relative; margin: 0; }
.werk-bild { position: relative; overflow: hidden; line-height: 0; background: var(--shell); }

/* Rahmen sitzt direkt auf der Leinwand */
.werk figure {
  border: 9px solid #FEFCF8;
  outline: 1px solid #D3C6B4;
  box-shadow: 0 2px 4px rgba(90,60,35,.08), 0 16px 34px rgba(90,60,35,.14);
  transition: box-shadow .4s ease, transform .4s ease;
}
.werk figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(36,30,24,.22), inset 0 3px 12px rgba(36,30,24,.12);
}
.werk:hover figure {
  transform: translateY(-5px);
  box-shadow: 0 3px 6px rgba(90,60,35,.10), 0 28px 54px rgba(90,60,35,.2);
}
.werk img {
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}

/* Punkte für Werke mit Raumansichten */
.werk-punkte {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.werk-punkte span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: background .3s ease, width .3s ease;
}
.werk-punkte span.ist-aktiv { width: 18px; background: #fff; }

/* Angaben unter dem Werk – bewusst zurückhaltend, das Bild trägt */
.werk-info { padding-top: 20px; }
.werk-titel {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.werk-meta { font-size: 15px; color: var(--ink-soft); margin-top: 7px; }
.werk-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.werk-preis { font-size: 16px; font-weight: 500; color: var(--ink); }
.status {
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.status.frei     { color: var(--free); background: rgba(46,125,50,.10); }
.status.verkauft { color: #7A736B; background: rgba(36,30,24,.06); }

.werke-hinweis { margin-top: 60px; font-size: 18px; color: var(--ink-soft); }
.werke-hinweis a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.rahmen-hinweis {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 640px; margin-top: 18px;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.rahmen-hinweis svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); }
.rahmen-hinweis strong { color: var(--ink); font-weight: 600; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.site-footer .brand { color: #fff; }
.footer-col h4 { color: #fff; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-size: 15px; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,.45);
}

/* ---------- Rechtsseiten ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 150px 28px 100px; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 48px); margin: 18px 0 34px; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 25px; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--ink-soft); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.legal .todo { background: #FFF7E6; border: 1px solid #F0D9A8; color: #8A6D20; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.legal a.back { color: var(--accent); font-size: 14px; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  section { padding: 80px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* ----- Schublade ----- */
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
    background: var(--paper); flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    padding: 24px 28px 30px; gap: 0;
    transform: translateX(100%); transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    border-left: 1px solid var(--line);
    box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Schatten nur bei offenem Menue - zugeklappt ragte er rechts als grauer Streifen ins Bild */
  .nav-links.open { transform: none; box-shadow: -18px 0 60px rgba(90, 60, 35, .26); }

  /* Kopf der Schublade: Wortmarke + Schliessen-Kreuz */
  .nav-kopf {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  }
  .nav-marke {
    font-family: var(--serif); font-size: 14px; letter-spacing: 3.4px;
    color: var(--ink-soft);
  }
  .nav-schliessen {
    width: 48px; height: 48px; margin-right: -12px; flex: none;
    display: grid; place-items: center; border-radius: 50%;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    transition: background .2s ease, transform .2s ease;
  }
  .nav-schliessen:active { background: var(--shell); transform: scale(.92); }
  .nav-schliessen svg { width: 25px; height: 25px; }

  /* Menuepunkte */
  .nav-links a {
    font-family: var(--serif); font-weight: 400; font-size: 27px; color: var(--ink);
    display: block; width: 100%; padding: 17px 0; line-height: 1.25;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a.ist-aktiv { color: var(--accent); }

  /* Anfrage-Knopf sitzt am Fuss der Schublade */
  .nav-links a.nav-cta {
    display: block; margin-top: auto; border-bottom: 0;
    font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .3px;
    text-align: center; color: #FDFAF5; background: var(--accent);
    border-radius: 999px; padding: 16px 20px;
  }
  .nav-links a.nav-cta:active { filter: brightness(.94); }

  /* ----- Schleier hinter der Schublade ----- */
  .nav-schleier {
    display: block; position: fixed; inset: 0; z-index: 99;
    background: rgba(36, 30, 24, .46);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .nav-schleier.sichtbar { opacity: 1; visibility: visible; }

  /* Kopfzeile tritt zurueck, solange das Menue offen ist -
     sonst leuchtet der helle Streifen ueber dem Schleier. */
  html.menue-offen .site-header::before,
  html.menue-offen .brand,
  html.menue-offen .nav-toggle { opacity: 0; }
  html.menue-offen .nav-toggle { pointer-events: none; }
  /* Solange das Menue offen ist, steht die Seite dahinter still.
     Verhindert auch seitliches Verrutschen, wenn die Breiten-Korrektur greift. */
  html.menue-offen, html.menue-offen body { overflow: hidden; }
  .site-header::before, .brand, .nav-toggle { transition: opacity .25s ease; }
  .nav-toggle { display: flex; }
  .werke { gap: 36px 22px; }
}
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
/* ============================================================
   BUCCODESIGN – Bausteine
   Hero · Dock · Reiter · Über mich · Kontakt · Scroll-Effekte
   ============================================================ */

/* ---------- Hero mit lebendigem Farbverlauf ---------- */
.hero {
  position: relative;
  padding: 180px 0 150px;
  overflow: hidden;
  background: var(--paper);
}

/* Bewegter Verlauf – weiche Farbwolken, hell und warm */
.hero-flaeche { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wolke {
  position: absolute; border-radius: 50%;
  filter: blur(85px); will-change: transform;
}
.w1 { width: 60vw; height: 60vw; background: #F7D3A6; top: -18%; left: -12%;  opacity: .62; animation: treiben1 26s ease-in-out infinite; }
.w2 { width: 52vw; height: 52vw; background: #F2C2C8; top: -6%;  right: -10%; opacity: .55; animation: treiben2 31s ease-in-out infinite; }
.w3 { width: 46vw; height: 46vw; background: #E7DFA6; bottom: -20%; left: 12%; opacity: .50; animation: treiben3 24s ease-in-out infinite; }
.w4 { width: 40vw; height: 40vw; background: #BFD8D5; bottom: -14%; right: 6%; opacity: .42; animation: treiben4 29s ease-in-out infinite; }
.w5 { width: 32vw; height: 32vw; background: #DFA98A; top: 34%; left: 40%;     opacity: .38; animation: treiben2 22s ease-in-out infinite reverse; }

@keyframes treiben1 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(7vw,5vh) scale(1.12)} }
@keyframes treiben2 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(-6vw,7vh) scale(1.08)} }
@keyframes treiben3 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(5vw,-6vh) scale(1.14)} }
@keyframes treiben4 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(-7vw,-4vh) scale(1.1)} }

/* zarte Körnung, damit die Fläche nicht digital wirkt */
.hero-koernung {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
/* heller Schleier, damit die Schrift immer gut lesbar bleibt */
.hero-flaeche::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,250,245,.62) 0%, rgba(253,250,245,.30) 42%, rgba(253,250,245,.86) 100%);
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 0.82fr;
  gap: 70px; align-items: center;
}

/* Glas-Pille über der Überschrift */
.glas-pille {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; margin-bottom: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 6px 20px rgba(90,60,35,.10), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink);
}
.glas-pille i { font-style: normal; color: var(--accent); }

/* Überschrift in zwei Ebenen */
.hero-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(54px, 8.5vw, 108px); line-height: .96;
  letter-spacing: -1px; margin-bottom: 30px;
}
.hero-name .zeile-leicht,
.hero-name .zeile-stark { display: block; }
.hero-name .zeile-leicht {
  font-weight: 400; font-style: italic;
  background: linear-gradient(100deg, #C98A52 0%, #B4657C 38%, #C9A24A 72%, #A96F45 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: verlaufWandern 12s ease-in-out infinite;
}
.hero-name .zeile-stark { font-weight: 600; color: var(--ink); }
@keyframes verlaufWandern {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

.hero-lead { font-size: 20px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 26px; max-width: 46ch; }
.hero-quote {
  font-family: var(--serif); font-style: italic; font-size: 25px;
  color: var(--ink); border-left: 2px solid var(--accent);
  padding-left: 22px; margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Pillen-Schaltflächen */
.btn-verlauf, .btn-glas { border-radius: 999px; padding: 18px 38px; font-size: 15px; }
.btn-verlauf {
  color: #fff; border: 0;
  background: linear-gradient(100deg, #C08149, #A96F45 45%, #B4657C);
  background-size: 180% 100%;
  box-shadow: 0 10px 26px rgba(169,111,69,.32);
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease;
}
.btn-verlauf:hover { background-position: 100% 50%; box-shadow: 0 14px 34px rgba(169,111,69,.42); }
.btn-glas {
  color: var(--ink);
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(90,60,35,.09);
}
.btn-glas:hover { background: rgba(255,255,255,.78); border-color: var(--accent); }

/* Foto der Künstlerin: leicht angewinkelt aufgestellt, weiche Ecken */
.hero-photo { position: relative; perspective: 1200px; z-index: 2; }
.hero-photo img {
  width: 100%;
  border-radius: 18px;
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(-1deg);
  box-shadow:
    -26px 26px 52px rgba(90,60,35,.26),
    -8px 10px 20px rgba(90,60,35,.14);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
  will-change: transform;
}
.hero-photo:hover img {
  box-shadow: -14px 34px 66px rgba(90,60,35,.3), 0 12px 26px rgba(169,111,69,.22);
}
.hero-photo::after {
  content: ""; position: absolute; inset: auto -20px -20px auto;
  width: 58%; height: 58%;
  border: 1px solid var(--accent); border-radius: 18px;
  opacity: .3; z-index: -1;
  transform: rotateY(-9deg) rotateZ(-1deg);
}

/* Rundes Siegel mit umlaufender Schrift */
.siegel {
  position: absolute; left: 46px; bottom: 34px; z-index: 3;
  width: 122px; height: 122px;
  display: flex; align-items: center; justify-content: center;
}
.siegel-ring {
  position: absolute; inset: 22px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: .45;
  animation: siegelPuls 3.4s ease-in-out infinite;
}
@keyframes siegelPuls {
  0%,100% { transform: scale(1);    opacity: .45; }
  50%     { transform: scale(1.09); opacity: .18; }
}
.siegel-schrift { position: absolute; inset: 0; width: 100%; height: 100%; animation: siegelDreht 26s linear infinite; }
.siegel-schrift text { font-family: var(--sans); font-size: 8.4px; letter-spacing: .6px; fill: var(--ink-soft); }
@keyframes siegelDreht { to { transform: rotate(360deg); } }
.siegel-kern { font-size: 20px; color: var(--accent); }

/* ---------- Dock (schwebende Navigation) ---------- */
.dock {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 95; pointer-events: none;
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
.dock.show { opacity: 1; pointer-events: auto; }
.dock-inner {
  display: flex; align-items: center; gap: 4px; padding: 8px;
  border-radius: 18px; border: 1px solid var(--line);
  background: rgba(253,250,245,.9); backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(22,22,26,.14);
  animation: dockFloat 5s ease-in-out infinite;
  transition: box-shadow .3s ease;
}
.dock-inner:hover { box-shadow: 0 18px 44px rgba(22,22,26,.2); }
@keyframes dockFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.dock-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--ink);
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.dock-btn svg { width: 20px; height: 20px; }
.dock-btn:hover { background: var(--shell); color: var(--accent); transform: translateY(-3px) scale(1.08); }
.dock-btn:active { transform: scale(.95); }
.dock-btn.is-active { color: var(--accent); background: var(--shell); }
.dock-btn::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap;
  background: var(--ink); color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.dock-btn:hover::after { opacity: 1; }

/* ---------- Galerie-Zusatz ---------- */
.werke-hinweis { margin-top: 54px; font-size: 16px; color: var(--ink-soft); }
.werke-hinweis a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reiter (animiert) ---------- */
.tabs { margin-top: 54px; }
.tab-bar {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 5px; border-radius: 14px; background: var(--shell); border: 1px solid var(--line);
}
.tab-btn {
  position: relative; z-index: 2; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-soft);
  padding: 10px 20px; border-radius: 10px; transition: color .25s ease;
}
.tab-btn.is-active { color: var(--paper); }
.tab-pill {
  position: absolute; z-index: 1; top: 5px; left: 5px;
  border-radius: 10px; background: var(--ink);
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              width .45s cubic-bezier(.2,.8,.2,1),
              height .45s cubic-bezier(.2,.8,.2,1);
}
.tab-panels {
  margin-top: 22px; padding: 38px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: panelIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(-10px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.panel-text { max-width: 720px; }
.panel-text p { color: var(--ink-soft); margin-bottom: 16px; }
.panel-text strong { color: var(--ink); font-weight: 600; }
.panel-text .klein { font-size: 14px; opacity: .85; }

.schritte { counter-reset: s; display: grid; gap: 4px; }
.schritte li {
  display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.schritte li:first-child { border-top: 0; padding-top: 0; }
.schritte span { font-family: var(--serif); font-size: 30px; color: var(--accent); line-height: 1; }
.schritte h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 4px; }
.schritte p { color: var(--ink-soft); font-size: 15px; }

.hinweis-box {
  background: var(--shell); border-left: 3px solid var(--accent);
  padding: 24px 26px; border-radius: 0 8px 8px 0; margin: 22px 0;
}
.hinweis-box h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.hinweis-box p:last-child { margin-bottom: 0; }

.check-liste { margin: 4px 0 26px; }
.check-liste li {
  position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-soft);
}
.check-liste li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ---------- Über mich ---------- */
.ueber-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 68px; align-items: center; }
.ueber-photo { perspective: 1200px; }
.ueber-photo img {
  width: 100%; border-radius: 14px;
  transform: rotateY(6deg) rotateZ(.8deg);
  box-shadow: 22px 26px 48px rgba(22,22,26,.2), 6px 10px 18px rgba(22,22,26,.1);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.ueber-grid p { color: var(--ink-soft); margin-bottom: 16px; }
.ueber-quote {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--ink) !important; border-left: 2px solid var(--accent);
  padding-left: 20px; margin-top: 26px;
}

/* ---------- Kontaktformular ---------- */
.kontakt-form {
  max-width: 680px; margin: 52px auto 0;
  padding: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--shell);
}
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { margin-bottom: 20px; }
.feld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.feld .req { color: var(--accent); }
.feld input, .feld textarea, .feld select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  transition: border-color .2s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--accent); }
.feld textarea { resize: vertical; min-height: 130px; }
.feld select { cursor: pointer; }
.kontakt-form .btn { width: 100%; justify-content: center; }
.form-consent { font-size: 12px; color: var(--ink-soft); margin-top: 14px; line-height: 1.55; }
.form-consent a { color: var(--accent); text-decoration: underline; }
.form-status { margin-top: 16px; font-size: 15px; font-weight: 500; text-align: center; display: none; }
.form-status.ok  { display: block; color: #2E7D32; }
.form-status.err { display: block; color: #B3261E; }

/* ---------- Fußzeile-Zusatz ---------- */
.footer-claim { margin-top: 14px; font-size: 14px; max-width: 300px; }

/* ---------- Scroll-Effekte ---------- */
.motion .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.motion .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero { padding: 140px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-photo { max-width: 460px; }
  .ueber-grid { grid-template-columns: 1fr; gap: 40px; }
  .ueber-photo { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 1024px) {
  /* Handy: großzügig, mittig, warm – und angenehme Zeilenlängen,
     damit man beim Zoomen nicht aus der Zeile läuft. */
  body { font-size: 20px; line-height: 1.75; }
  .container { padding: 0 26px; }
  section { padding: 90px 0; }

  /* --- mittig ausrichten --- */
  .hero-text, .hero-grid, #galerie .container, #auftrag .container,
  #ueber .container, .ueber-grid > div { text-align: center; }
  .hero-actions, .chips, .partner-logos { justify-content: center; }
  .rahmen-hinweis, .werke-hinweis { justify-content: center; text-align: center; }
  .tab-bar { margin-left: auto; margin-right: auto; }
  .tab-panel, .panel-text { text-align: left; }

  /* --- Zeilen nie länger als angenehm lesbar --- */
  .section-intro, .hero-lead, .ueber-grid p, .panel-text p,
  .rahmen-hinweis, .werke-hinweis, .check-liste, .footer-claim {
    max-width: 34ch; margin-left: auto; margin-right: auto;
  }
  .hero-quote, .ueber-quote { max-width: 30ch; }
  .schritte p { max-width: 40ch; }

  /* Zitate mittig – feine Linie oben statt seitlichem Strich */
  .hero-quote, .ueber-quote {
    border-left: 0; border-top: 2px solid var(--accent);
    padding: 22px 0 0; display: inline-block; text-align: center;
  }

  /* --- Schriftgrößen: deutlich größer --- */
  .eyebrow { font-size: 14px; letter-spacing: 3px; margin-bottom: 20px; }
  .section-title { font-size: clamp(40px, 11vw, 58px); margin-bottom: 24px; }
  .section-intro { font-size: 21px; }
  .hero { padding: 130px 0 84px; }
  .hero-grid { position: relative; z-index: 2; }
  .glas-pille { font-size: 13px; letter-spacing: 1.8px; padding: 12px 20px; margin-bottom: 26px; }
  .hero-name .zeile-leicht, .hero-name .zeile-stark { display: block; }
  .hero-lead { max-width: 34ch; }
  .btn-verlauf, .btn-glas { padding: 21px 26px; }
  .wolke { filter: blur(60px); }
  .w1 { width: 92vw; height: 92vw; } .w2 { width: 84vw; height: 84vw; }
  .w3 { width: 76vw; height: 76vw; } .w4 { width: 68vw; height: 68vw; }
  .w5 { width: 56vw; height: 56vw; }
  /* Siegel mittig unter die Schaltflächen statt in die Ecke.
     WICHTIG: relative, sonst richten sich Ring und Schrift am Hero aus. */
  .siegel {
    position: relative; left: auto; bottom: auto;
    margin: 44px auto 0;
    width: 124px; height: 124px;
  }
  .hero-name { font-size: clamp(56px, 17vw, 92px); margin-bottom: 30px; }
  .hero-lead { font-size: 22px; }
  .hero-quote { font-size: 25px; }
  .hero-actions { gap: 14px; margin-top: 8px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; padding: 21px 26px; font-size: 18px; }
  .hero-photo { max-width: 560px; margin: 0 auto; }
  .rahmen-hinweis { font-size: 17px; margin-top: 22px; }
  .werke { grid-template-columns: 1fr; gap: 52px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .werk-info { text-align: center; }
  .werk-fuss { justify-content: center; }
  .werk-titel { font-size: 17px; }
  .werk-meta { font-size: 16px; }
  .werk-preis { font-size: 18px; }
  .galerie-einleitung { max-width: 34ch; margin-left: auto; margin-right: auto; }
  .galerie-einleitung p:first-child { font-size: 21px; }
  .werke-hinweis { font-size: 19px; margin-top: 48px; }

  /* Reiter untereinander */
  .tab-bar { display: flex; flex-direction: column; width: 100%; max-width: 560px; gap: 4px; padding: 6px; }
  .tab-btn { width: 100%; text-align: center; padding: 19px 20px; font-size: 18px; }
  .tab-panels { padding: 32px 24px; }
  .schritte li { grid-template-columns: 56px 1fr; gap: 18px; text-align: left; padding: 24px 0; }
  .schritte span { font-size: 32px; }
  .schritte h4 { font-size: 24px; }
  .schritte p, .panel-text p, .check-liste li { font-size: 19px; }
  .hinweis-box { padding: 26px 24px; }
  .hinweis-box h4 { font-size: 23px; }

  .ueber-photo { max-width: 520px; }
  .ueber-grid p { font-size: 20px; }
  .ueber-quote { font-size: 23px; }

  /* Galerie-Angaben */

  /* Formular */
  .feld-reihe { grid-template-columns: 1fr; gap: 0; }
  .kontakt-form { padding: 34px 26px; max-width: 580px; }
  .feld { text-align: left; margin-bottom: 24px; }
  .feld label { font-size: 17px; margin-bottom: 10px; }
  .feld input, .feld textarea, .feld select { font-size: 19px; padding: 18px; }
  .kontakt-form .btn { padding: 21px 26px; font-size: 18px; }
  .form-consent { font-size: 14px; }

  /* Fußzeile mittig */
  .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; justify-items: center; }
  .footer-col h4 { font-size: 13px; }
  .footer-col a, .footer-col p { font-size: 18px; }
  .footer-claim { font-size: 17px; }
  .footer-bottom { justify-content: center; text-align: center; font-size: 15px; }

  /* Dock */
  .dock { bottom: 16px; }
  .dock-inner { gap: 5px; padding: 9px; }
  .dock-btn { width: 54px; height: 54px; }
  .dock-btn svg { width: 25px; height: 25px; }
  .dock-btn::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wolke, .siegel-ring, .siegel-schrift, .hero-name .zeile-leicht { animation: none; }
  .dock-inner { animation: none; }
  .tab-panel.is-active { animation: none; }
  .motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ============================================================
   Mehrseitige Struktur: Seitenkopf, Werkseite, Startseiten-Bausteine
   ============================================================ */

.nav-links a.ist-aktiv { color: var(--accent); }

/* Kopf der Unterseiten */
.seiten-kopf { padding: 170px 0 30px; }
.seiten-kopf .section-title { margin-bottom: 20px; }
.seiten-kopf .galerie-einleitung,
.seiten-kopf .rahmen-hinweis { margin-left: auto; margin-right: auto; }

/* Werk im Raster ist anklickbar */
.werk-link { display: block; color: inherit; }
.werk-link:hover .werk-titel { color: var(--accent); }

/* Zitatband auf der Startseite */
.zitat-band { padding: 96px 0; }
.grosses-zitat {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.3;
  max-width: 20ch; margin: 0 auto 22px;
}
.zitat-name { font-size: 12px; letter-spacing: 3.4px; text-transform: uppercase; color: var(--accent); }

/* Sammlungs-Kachel */
.sammlung-kachel {
  display: block; max-width: 760px; margin: 44px auto 0;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--paper); color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sammlung-kachel:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(90,60,35,.16); }
.kachel-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.kachel-bilder img { width: 100%; height: 220px; object-fit: cover; display: block; }
.kachel-text { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; }
.kachel-text strong { font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; }
.kachel-text em { font-style: normal; font-size: 15px; color: var(--accent); }

/* Drei Schritte */
.drei-punkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 48px 0 44px; text-align: left; }
.drei-punkte span { font-family: var(--serif); font-size: 30px; color: var(--accent); display: block; margin-bottom: 8px; }
.drei-punkte h4 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.drei-punkte p { color: var(--ink-soft); font-size: 16px; }

/* Vertrauens-Reihe */
.vertrauen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.vertrauen-reihe svg { width: 28px; height: 28px; color: var(--accent); margin: 0 auto 14px; display: block; }
.vertrauen-reihe h4 { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 10px; }
.vertrauen-reihe p { color: var(--ink-soft); font-size: 16px; max-width: 30ch; margin: 0 auto; }

/* ---------- Werk-Detailseite ---------- */
.werkseite { padding: 150px 0 100px; }
.brotkrumen { font-size: 14px; color: var(--ink-soft); margin-bottom: 30px; }
.brotkrumen a { color: var(--accent); }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen span { margin: 0 8px; opacity: .5; }

.werk-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }

.werk-gross {
  position: relative; margin: 0;
  border: 11px solid #FEFCF8; outline: 1px solid #D3C6B4;
  box-shadow: 0 3px 6px rgba(90,60,35,.08), 0 22px 46px rgba(90,60,35,.16);
}
.werk-gross::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(36,30,24,.22), inset 0 3px 12px rgba(36,30,24,.12);
}
.werk-gross img { width: 100%; height: auto; display: block; transition: opacity .3s ease; }

.werk-ansichten { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.werk-ansichten .ansicht {
  width: 76px; height: 76px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
  opacity: .6; transition: opacity .25s ease, border-color .25s ease, transform .2s ease;
}
.werk-ansichten .ansicht img { width: 100%; height: 100%; object-fit: cover; display: block; }
.werk-ansichten .ansicht:hover { opacity: .95; transform: translateY(-2px); }
.werk-ansichten .ansicht.ist-aktiv { opacity: 1; border-color: var(--accent); border-width: 2px; }

.werk-name { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; margin-bottom: 12px; }
.werk-untertitel { font-size: 17px; color: var(--ink-soft); margin-bottom: 22px; }
.werk-preis.gross { font-size: 21px; font-weight: 500; }
.werk-detail .werk-fuss { justify-content: flex-start; gap: 18px; margin-bottom: 30px; }
.werk-text { font-size: 18px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 32px; max-width: 46ch; }
.btn.breit { width: 100%; justify-content: center; }

.werk-fakten { margin-top: 40px; border-top: 1px solid var(--line); }
.werk-fakten dt { font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 600; color: var(--ink); margin-top: 22px; }
.werk-fakten dd { font-size: 16px; color: var(--ink-soft); margin-top: 7px; }

.werk-blaettern {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px;
}
.werk-blaettern a { color: var(--ink-soft); }
.werk-blaettern a:hover { color: var(--accent); }

/* ---------- Handy ---------- */
@media (max-width: 1024px) {
  .seiten-kopf { padding: 138px 0 20px; }
  .zitat-band { padding: 76px 0; }
  .grosses-zitat { font-size: clamp(26px, 7.5vw, 38px); max-width: 16ch; }

  .kachel-bilder img { height: 150px; }
  .kachel-text { flex-direction: column; gap: 8px; text-align: center; padding: 20px; }

  .drei-punkte { grid-template-columns: 1fr; gap: 30px; text-align: center; max-width: 420px; margin-left: auto; margin-right: auto; }
  .drei-punkte p { max-width: 34ch; margin: 0 auto; }
  .vertrauen-reihe { grid-template-columns: 1fr; gap: 40px; }

  .werkseite { padding: 130px 0 80px; }
  .brotkrumen { text-align: center; font-size: 15px; }
  .werk-detail { grid-template-columns: 1fr; gap: 34px; }
  .werk-buehne, .werk-angaben { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; }
  .werk-angaben { text-align: center; }
  .werk-ansichten { justify-content: center; }
  .werk-ansichten .ansicht { width: 82px; height: 82px; }
  .werk-detail .werk-fuss { justify-content: center; }
  .werk-text { font-size: 19px; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .werk-fakten { text-align: left; }
  .werk-fakten dd { font-size: 17px; }
  .werk-blaettern { justify-content: center; gap: 22px; font-size: 16px; }
}


/* ============================================================
   Atelier-Video
   ============================================================ */

.atelier { padding: 96px 0; background: var(--shell); }

.atelier-raster {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* Rahmen wie bei den Werken, damit das Video zur Seite gehoert */
.atelier-buehne {
  position: relative; margin: 0;
  border: 11px solid #FEFCF8; outline: 1px solid #D3C6B4;
  box-shadow: 0 3px 6px rgba(90,60,35,.08), 0 22px 46px rgba(90,60,35,.16);
  background: #EDE4D8;
}
.atelier-buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(36,30,24,.22), inset 0 3px 12px rgba(36,30,24,.12);
}
.atelier-video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 478 / 850; object-fit: cover; background: #EDE4D8;
}

/* Ton-Schalter */
.atelier-ton {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 9px 11px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; letter-spacing: .3px; color: #FDFAF5;
  background: rgba(36,30,24,.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: background .25s ease, transform .2s ease;
}
.atelier-ton:hover { background: rgba(36,30,24,.82); transform: translateY(-1px); }
.atelier-ton svg { width: 17px; height: 17px; flex: none; }
.atelier-ton .ton-an { display: none; }
.atelier-ton[aria-pressed="true"] .ton-aus { display: none; }
.atelier-ton[aria-pressed="true"] .ton-an { display: block; }

.atelier-text .section-title { margin-bottom: 18px; }
.atelier-text .section-intro { margin-left: 0; margin-right: 0; max-width: 44ch; }
.atelier-notiz {
  font-family: var(--serif); font-style: italic;
  font-size: 19px; color: var(--accent);
  margin: 22px 0 30px; max-width: 40ch;
}

/* Kleines geneigtes Foto oben auf der Originale-Seite */
.originale-foto { perspective: 1200px; max-width: 300px; margin: 36px auto 0; }
.originale-foto img {
  width: 100%; border-radius: 14px; display: block;
  transform: rotateY(6deg) rotateZ(.8deg);
  box-shadow: 22px 26px 48px rgba(22,22,26,.2), 6px 10px 18px rgba(22,22,26,.1);
}

/* Stillleben-Band (Biografie, unter dem Text) */
.bio-band { max-width: 760px; margin: 44px auto 0; }
.bio-band img {
  width: 100%; display: block; border-radius: 16px;
  box-shadow: 0 4px 10px rgba(90,60,35,.1), 0 22px 48px rgba(90,60,35,.16);
}

@media (max-width: 1024px) {
  .originale-foto { max-width: 240px; }
  .atelier { padding: 72px 0; }
  .atelier-raster { grid-template-columns: 1fr; gap: 34px; }
  .atelier-buehne { max-width: 480px; margin: 0 auto; width: 100%; justify-self: center; }
  .atelier-text { text-align: center; }
  .atelier-text .section-intro,
  .atelier-notiz { margin-left: auto; margin-right: auto; max-width: 34ch; }
  .atelier-notiz { font-size: 20px; }
  .atelier-ton { font-size: 14px; padding: 11px 16px 11px 13px; }
  .atelier-ton svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-ton { transition: none; }
}



/* ============================================================
   Verkaufsblatt der Werkseiten
   Aufbau nach der Vorlage der Kuenstlerin: Schreibschrift-Titel,
   Goldstrich, Technik, Text, Herz-Trenner, Schlusszitat.
   ============================================================ */

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

:root {
  --gold:      #C29A50;
  --gold-hell: #E0C489;
  --violett:   #7B5C8D;
  --violett-t: #4E4459;
  --blatt:     #FCF5EA;
}

.werkblatt {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blatt);
  border: 1px solid #EADFCB;
  border-radius: 3px;
  padding: 58px 54px 46px;
  box-shadow: 0 2px 4px rgba(90,60,35,.05), 0 26px 60px rgba(90,60,35,.13);
}

/* Goldener Pinselstrich oben rechts */
.werkblatt::before {
  content: ""; position: absolute; z-index: -1;
  top: -5%; right: -8%; width: 44%; height: 22%;
  background:
    radial-gradient(52% 26% at 30% 48%, rgba(186,142,62,.92), transparent 70%),
    radial-gradient(44% 20% at 58% 38%, rgba(222,190,120,.95), transparent 72%),
    radial-gradient(38% 15% at 74% 56%, rgba(198,158,80,.80), transparent 74%),
    radial-gradient(30% 11% at 44% 66%, rgba(170,128,52,.62), transparent 76%);
  filter: blur(3px);
  transform: rotate(-8deg);
}

/* Aquarell in Violett unten rechts */
.werkblatt::after {
  content: ""; position: absolute; z-index: -1;
  right: -8%; bottom: -9%; width: 42%; height: 38%;
  background:
    radial-gradient(closest-side at 38% 46%, rgba(138,88,160,.62), transparent 74%),
    radial-gradient(closest-side at 66% 62%, rgba(210,142,190,.56), transparent 72%),
    radial-gradient(closest-side at 52% 26%, rgba(192,152,86,.44), transparent 70%),
    radial-gradient(closest-side at 74% 40%, rgba(160,116,178,.38), transparent 72%);
  filter: blur(9px);
}

.blatt-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: start;
}

/* Bild im weissen Rahmen wie in der Vorlage */
.blatt-bild .werk-gross {
  border-width: 13px; box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 16px 34px rgba(90,60,35,.15);
}

.blatt-angaben { text-align: center; padding-top: 12px; }

.blatt-titel {
  font-family: 'Parisienne', 'Cormorant Garamond', cursive;
  font-weight: 400; color: var(--violett);
  font-size: clamp(46px, 5.4vw, 68px); line-height: 1.12;
  margin: 0 0 18px; letter-spacing: .5px;
}

/* Feiner Goldstrich, zu den Enden auslaufend */
.blatt-strich {
  display: block; width: min(230px, 70%); height: 2px; margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  border-radius: 2px;
}

.blatt-technik {
  font-family: var(--serif); font-size: 18px; line-height: 1.55;
  color: var(--violett-t); margin: 0 0 30px;
}

.blatt-text { text-align: left; max-width: 40ch; margin: 0 auto; }
.blatt-text p {
  font-family: var(--serif); font-size: 18px; line-height: 1.72;
  color: var(--violett-t); margin: 0 0 17px;
}
.blatt-text p:last-child { margin-bottom: 0; }

/* Herz-Trenner */
.blatt-herz {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin: 44px auto 26px; max-width: 460px; color: var(--gold);
}
.blatt-herz .herz-linie {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold));
}
.blatt-herz .herz-linie:last-child { transform: scaleX(-1); }
.blatt-herz svg { width: 27px; height: 24px; flex: none; }

.blatt-zitat {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 22px); line-height: 1.6;
  color: var(--violett); text-align: center; margin: 0 auto 18px; max-width: 34ch;
}

.blatt-schwung {
  display: block; width: min(240px, 64%); height: auto;
  margin: 0 auto; color: var(--gold); opacity: .85;
}

/* Kaufmaennischer Teil unter dem Blatt */
.werk-handel { max-width: 620px; margin: 52px auto 0; }
.handel-kopf {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.werk-handel .werk-fakten { margin-top: 38px; }

/* ---------- Handy ---------- */
@media (max-width: 1024px) {
  .werkblatt { padding: 40px 24px 34px; }
  .blatt-raster { grid-template-columns: 1fr; gap: 34px; }
  .blatt-bild { max-width: 480px; margin: 0 auto; width: 100%; }
  .blatt-angaben { padding-top: 0; }
  .blatt-titel { font-size: clamp(42px, 13vw, 62px); }
  .blatt-technik { font-size: 19px; }
  .blatt-text { max-width: 34ch; }
  .blatt-text p { font-size: 19px; }
  .blatt-zitat { font-size: 21px; max-width: 28ch; }
  .blatt-herz { margin: 36px auto 22px; gap: 16px; }
  .werkblatt::before { width: 78%; height: 22%; }
  .werkblatt::after { width: 72%; height: 26%; }
  .werk-handel { margin-top: 40px; }
}

/* ============================================================
   Notbremse fuer Browser, die die Seite kuenstlich breit aufbauen
   (z. B. 980px auf einem 407px-Handy, weil sich der Browser als
   Desktop ausgibt). Dann waere alles rund 2,4-mal zu klein.

   Hier wachsen alle Groessen proportional mit der Fensterbreite,
   Bezug ist --breit-basis (aus der echten Bildschirmbreite berechnet). Gesetzt wird die Klasse in js/main.js,
   und zwar NUR wenn das Fenster deutlich breiter ist als der
   Bildschirm. Normale Handys, Tablets und Rechner bleiben unberuehrt.
   ============================================================ */

@media (max-width: 1024px) {
  html.breit-aufgebaut body { font-size: calc(19.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .eyebrow { font-size: calc(13.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .section-intro { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .glas-pille { font-size: calc(13.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero-lead { font-size: calc(22.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero-quote { font-size: calc(25.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero-actions .btn { font-size: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .rahmen-hinweis { font-size: calc(16.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-titel { font-size: calc(16.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-meta { font-size: calc(16.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-preis { font-size: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .galerie-einleitung p:first-child { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werke-hinweis { font-size: calc(19.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .tab-btn { font-size: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .schritte span { font-size: calc(31.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .schritte h4 { font-size: calc(24 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .schritte p, .panel-text p, .check-liste li { font-size: calc(19.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hinweis-box h4 { font-size: calc(22.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .ueber-grid p { font-size: calc(19.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .ueber-quote { font-size: calc(22.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .feld label { font-size: calc(16.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .feld input, .feld textarea, .feld select { font-size: calc(19.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .kontakt-form .btn { font-size: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .form-consent { font-size: calc(13.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .footer-col h4 { font-size: calc(13.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .footer-col a, .footer-col p { font-size: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .footer-claim { font-size: calc(16.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .footer-bottom { font-size: calc(15 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .brotkrumen { font-size: calc(15 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-text { font-size: calc(19.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-fakten dt { font-size: calc(12 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-fakten dd { font-size: calc(16.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-blaettern { font-size: calc(16.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .atelier-notiz { font-size: calc(19.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .atelier-ton { font-size: calc(13.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .drei-punkte h4 { font-size: calc(22.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .drei-punkte p { font-size: calc(16.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .drei-punkte span { font-size: calc(30 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .vertrauen-reihe h4 { font-size: calc(12 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .vertrauen-reihe p { font-size: calc(16.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .zitat-name { font-size: calc(12 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .kachel-text strong { font-size: calc(13.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .kachel-text em { font-size: calc(15 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-links a { font-size: calc(27 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-marke { font-size: calc(13.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-links a.nav-cta { font-size: calc(15 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .btn { font-size: calc(15 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .legal a.back { font-size: calc(13.99 * 100vw / var(--breit-basis, 469)); }

  /* Die Schublade muss mitwachsen, sonst laufen die grossen
     Menuepunkte aus dem 360px-Deckel heraus. */
  html.breit-aufgebaut .nav-links {
    width: calc(322.5 * 100vw / var(--breit-basis, 469)); max-width: none; padding: calc(24 * 100vw / var(--breit-basis, 469)) calc(28.01 * 100vw / var(--breit-basis, 469)) calc(30 * 100vw / var(--breit-basis, 469));
  }
  html.breit-aufgebaut .nav-links a { padding: calc(16.99 * 100vw / var(--breit-basis, 469)) 0; }
  html.breit-aufgebaut .nav-links a.nav-cta { padding: calc(16.01 * 100vw / var(--breit-basis, 469)) calc(19.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-kopf { margin-bottom: calc(30 * 100vw / var(--breit-basis, 469)); padding-bottom: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-schliessen { width: calc(48 * 100vw / var(--breit-basis, 469)); height: calc(48 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .nav-schliessen svg { width: calc(25.01 * 100vw / var(--breit-basis, 469)); height: calc(25.01 * 100vw / var(--breit-basis, 469)); }

  /* Verkaufsblatt der Werkseiten */
  html.breit-aufgebaut .blatt-titel   { font-size: calc(48.75 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .blatt-technik { font-size: calc(19 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .blatt-text p  { font-size: calc(19 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .blatt-zitat   { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werkblatt     { padding: calc(40 * 100vw / var(--breit-basis, 469)) calc(24 * 100vw / var(--breit-basis, 469)) calc(34 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .blatt-bild    { max-width: none; }
  html.breit-aufgebaut .werk-handel   { max-width: none; }
  html.breit-aufgebaut .blatt-herz svg { width: calc(27 * 100vw / var(--breit-basis, 469)); height: calc(24 * 100vw / var(--breit-basis, 469)); }

  html.breit-aufgebaut .section-title { font-size: calc(41.25 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero-name { font-size: calc(63.75 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .grosses-zitat { font-size: calc(28.12 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .werk-name { font-size: calc(34.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .legal h1 { font-size: calc(48 * 100vw / var(--breit-basis, 469)); }

  html.breit-aufgebaut .hero-photo, html.breit-aufgebaut .werke, html.breit-aufgebaut .ueber-photo, html.breit-aufgebaut .kontakt-form, html.breit-aufgebaut .tab-bar, html.breit-aufgebaut .werk-buehne, html.breit-aufgebaut .werk-angaben, html.breit-aufgebaut .atelier-buehne, html.breit-aufgebaut .drei-punkte, html.breit-aufgebaut .sammlung-kachel, html.breit-aufgebaut .bio-band { max-width: none; }

  html.breit-aufgebaut section { padding: calc(79.99 * 100vw / var(--breit-basis, 469)) 0; }
  html.breit-aufgebaut .container { padding: 0 calc(28.01 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero-actions .btn { padding: calc(21 * 100vw / var(--breit-basis, 469)) calc(25.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .kontakt-form { padding: calc(34.01 * 100vw / var(--breit-basis, 469)) calc(25.99 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .feld input, .feld textarea, .feld select { padding: calc(18 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .btn { padding: calc(16.99 * 100vw / var(--breit-basis, 469)) calc(30 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .tab-btn { padding: calc(19.01 * 100vw / var(--breit-basis, 469)) calc(19.99 * 100vw / var(--breit-basis, 469)); }
}


/* ============================================================
   Startseite: Leiste mit verkauften Bildern
   Waagerecht wischbar, nur mit CSS. Senkrechtes Scrollen bleibt frei.
   ============================================================ */
.verkauft-abschnitt { padding: 96px 0; }

.verkauft-leiste {
  display: flex; gap: 24px; margin-top: 40px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
  padding: 10px 24px 26px; scrollbar-width: thin;
}
/* Mittig, solange wenige Karten da sind - wischbar, sobald es mehr werden */
.verkauft-leiste > :first-child { margin-left: auto; }
.verkauft-leiste > :last-child  { margin-right: auto; }

.verkauft-karte { flex: 0 0 300px; margin: 0; scroll-snap-align: center; }

.verkauft-bild {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 9px solid #FEFCF8; outline: 1px solid #D3C6B4;
  box-shadow: 0 3px 6px rgba(90,60,35,.08), 0 18px 40px rgba(90,60,35,.14);
}
.verkauft-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.verkauft-bild .status {
  position: absolute; left: 12px; top: 12px;
  background: rgba(253,250,245,.94); color: var(--ink);
  box-shadow: 0 2px 8px rgba(36,30,24,.14);
}
.verkauft-karte figcaption {
  font-family: var(--serif); font-size: 19px; color: var(--ink-soft);
  text-align: center; margin-top: 14px;
}

@media (max-width: 1024px) {
  .verkauft-abschnitt { padding: 72px 0; }
  .verkauft-karte { flex-basis: 78%; }
  .verkauft-karte figcaption { font-size: 20px; }

  /* Browser, die die Seite kuenstlich breit aufbauen (siehe Notbremse) */
  html.breit-aufgebaut .verkauft-abschnitt { padding: calc(72 * 100vw / var(--breit-basis, 469)) 0; }
  html.breit-aufgebaut .verkauft-karte figcaption { font-size: calc(20 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .verkauft-bild .status { font-size: calc(12 * 100vw / var(--breit-basis, 469)); }
}


/* ============================================================
   Helligkeit, Hero als Werkblatt, Verkauft-Bereich, randloses Blatt
   ============================================================ */

/* Manche Handy-Browser dunkeln den Seitengrund ab, lassen aber Flaechen mit
   eigener Farbe hell. Deshalb bekommt jeder Bereich seine eigene helle Farbe -
   sonst steht dunkle Schrift auf abgedunkeltem Grund und ist unsichtbar. */
html, body, main, section { background-color: var(--paper); }

/* ---------- Hero: Blatt mit Goldstrich und Aquarell ---------- */
.hero {
  background-color: var(--blatt);
  padding: 160px 0 130px;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 3%; right: -12%; width: 58%; height: 30%;
  background:
    radial-gradient(52% 26% at 30% 48%, rgba(186,142,62,.78), transparent 70%),
    radial-gradient(44% 20% at 58% 38%, rgba(222,190,120,.85), transparent 72%),
    radial-gradient(38% 15% at 74% 56%, rgba(198,158,80,.68), transparent 74%),
    radial-gradient(30% 11% at 44% 66%, rgba(170,128,52,.48), transparent 76%);
  filter: blur(3px);
  transform: rotate(-8deg);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -16%; bottom: -12%; width: 68%; height: 52%;
  background:
    radial-gradient(closest-side at 38% 46%, rgba(138,88,160,.36), transparent 74%),
    radial-gradient(closest-side at 64% 60%, rgba(214,146,178,.40), transparent 72%),
    radial-gradient(closest-side at 52% 26%, rgba(196,158,90,.28), transparent 70%);
  filter: blur(12px);
}

.hero .hero-vorzeile {
  font: 500 13px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.hero .hero-name { font-family: var(--serif); letter-spacing: 0; margin-bottom: 0; line-height: 1; }
.hero .hero-name .hero-schrift {
  display: block; font-family: 'Parisienne', var(--serif); font-weight: 400;
  font-size: clamp(64px, 9vw, 124px); line-height: 1.05; color: var(--violett);
  margin-bottom: -.06em;
}
.hero .hero-name .zeile-stark {
  font-weight: 400; color: var(--ink);
  font-size: clamp(52px, 7.4vw, 98px); line-height: 1;
}
.hero .hero-strich {
  display: block; width: 210px; max-width: 70%; height: 2px; margin: 30px 0 28px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  border-radius: 2px;
}
.hero .hero-lead {
  font-family: var(--serif); font-size: 23px; line-height: 1.65;
  color: var(--violett-t); max-width: 36ch; margin-bottom: 38px;
}
.hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.hero .hero-knopf {
  border-radius: 2px; border: 0; padding: 19px 36px;
  font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  background: var(--accent); color: #FDFAF5; box-shadow: none;
  transition: background-color .35s ease;
}
.hero .hero-knopf:hover { background: #8F5B37; transform: none; }
.hero .hero-link {
  font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 8px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
  transition: color .3s ease;
}
.hero .hero-link:hover { color: var(--accent); }

/* Foto wie ein Abzug im weissen Rand - leicht schraeg, beim Zeigen gerade */
.hero .hero-photo img {
  border-radius: 3px; border: 12px solid #FFFDF9;
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 26px 50px rgba(90,60,35,.20);
  transform: rotate(-1.6deg);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .7s ease;
}
.hero .hero-photo:hover img {
  transform: rotate(0deg);
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 32px 60px rgba(90,60,35,.24);
}
.hero .hero-photo::after { display: none; }
/* Bluete in Rose und Gold hinter dem Foto */
.hero .hero-photo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -20% -12% -14%;
  background:
    radial-gradient(closest-side at 54% 44%, rgba(214,150,182,.42), transparent 72%),
    radial-gradient(closest-side at 30% 72%, rgba(196,160,96,.34), transparent 70%),
    radial-gradient(closest-side at 76% 76%, rgba(150,110,170,.26), transparent 70%);
  filter: blur(16px);
}

/* ---------- Verkauft-Bereich: hell, mit Aquarell ---------- */
.verkauft-abschnitt { position: relative; overflow: hidden; isolation: isolate; background-color: var(--blatt); }
.verkauft-abschnitt::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -12%; top: -8%; width: 56%; height: 46%;
  background:
    radial-gradient(closest-side at 40% 46%, rgba(214,146,178,.34), transparent 72%),
    radial-gradient(closest-side at 64% 62%, rgba(138,88,160,.22), transparent 70%);
  filter: blur(12px);
}
.verkauft-abschnitt::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; bottom: -6%; width: 54%; height: 40%;
  background:
    radial-gradient(48% 24% at 40% 50%, rgba(206,170,104,.50), transparent 72%),
    radial-gradient(34% 16% at 66% 40%, rgba(222,190,120,.52), transparent 74%);
  filter: blur(6px); transform: rotate(-6deg);
}
.verkauft-abschnitt .section-title {
  font-family: 'Parisienne', var(--serif); font-weight: 400; color: var(--violett);
  font-size: clamp(58px, 7vw, 86px); line-height: 1.1;
}
.verkauft-abschnitt .container::after {
  content: ""; display: block; width: 190px; max-width: 60%; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}
.verkauft-abschnitt .section-intro { font-family: var(--serif); color: var(--violett-t); }
.verkauft-karte figcaption { color: var(--violett-t); }

@media (max-width: 1024px) {
  .hero { padding: 128px 0 84px; }
  .hero::before { top: 0; right: -24%; width: 96%; height: 17%; }
  .hero::after { left: -30%; bottom: -4%; width: 120%; height: 36%; }
  .hero .hero-text { text-align: center; }
  .hero .hero-name .hero-schrift { font-size: clamp(64px, 18vw, 92px); }
  .hero .hero-name .zeile-stark { font-size: clamp(48px, 13vw, 66px); }
  .hero .hero-strich { margin: 24px auto 24px; }
  .hero .hero-lead { font-size: 21px; margin-left: auto; margin-right: auto; max-width: 30ch; }
  .hero .hero-actions { flex-direction: column; gap: 22px; }
  .hero .hero-knopf { width: 100%; max-width: 420px; justify-content: center; }
  .hero .hero-photo { margin-top: 52px; }
  .hero .hero-photo img { border-width: 10px; }

  .verkauft-abschnitt .section-title { font-size: clamp(56px, 15vw, 76px); }
  .verkauft-abschnitt .section-intro { font-size: 21px; }

  /* Werkseite: das helle Blatt reicht am Handy bis an den Rand */
  /* clip statt hidden: schneidet Ueberstand ab, ohne einen Scroll-Bereich zu bauen */
  .werkseite { background-color: var(--blatt); overflow-x: clip; }
  .werkblatt {
    width: 100vw; margin-left: calc(50% - 50vw);
    border: 0; border-radius: 0; box-shadow: none;
  }

  /* Browser, die die Seite kuenstlich breit aufbauen (siehe Notbremse) */
  html.breit-aufgebaut .hero { padding: calc(128 * 100vw / var(--breit-basis, 469)) 0 calc(84 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-vorzeile { font-size: calc(13 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-name .hero-schrift { font-size: calc(67.5 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-name .zeile-stark { font-size: calc(48.75 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-strich { width: calc(210 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-lead { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-actions .hero-knopf { font-size: calc(14 * 100vw / var(--breit-basis, 469)); padding: calc(20 * 100vw / var(--breit-basis, 469)) calc(30 * 100vw / var(--breit-basis, 469)); max-width: none; }
  html.breit-aufgebaut .hero .hero-link { font-size: calc(14 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .verkauft-abschnitt .section-title { font-size: calc(56.25 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .verkauft-abschnitt .section-intro { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
}


/* ============================================================
   Florale Handschrift - weiblicher, waermer, mit Liebe
   Bluetenranken als Trenner, Zweige in den Ecken, Rosenholz statt Kupfer,
   Ueberschriften in Schreibschrift, helle Fusszeile.
   ============================================================ */
:root {
  --rose:       #EBC3CE;
  --rosenholz:  #955A63;   /* 5,1 : 1 auf Elfenbein - auch fuer kleine Schrift */
  --salbei:     #C4CDB1;
  --flieder:    #CDB8D6;
}

/* Ueberschriften: Schreibschrift in Violett, darunter eine Bluetenranke */
.section-title {
  font-family: 'Parisienne', var(--serif); font-weight: 400; letter-spacing: 0;
  color: var(--violett); font-size: clamp(50px, 6vw, 80px); line-height: 1.12;
}
.section-title::after {
  content: ""; display: block; width: 210px; max-width: 70%; height: 24px; margin: 16px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E %3Cpath d='M10 12H92M148 12H230' stroke='%23C29A50' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E %3Cpath d='M92 12c5-6 12-7 16-3c-3 6-10 8-16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M148 12c-5-6-12-7-16-3c3 6 10 8 16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cg transform='translate(120 12)' fill='%23EBC3CE' stroke='%23B77A8C' stroke-width='.7'%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(72)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(216)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.atelier-text .section-title::after { margin-left: 0; }
.verkauft-abschnitt .container::after { display: none; }
.eyebrow, .hero .hero-vorzeile { color: var(--rosenholz); }

/* Goldstriche werden Bluetenranken */
.hero .hero-strich, .blatt-strich {
  height: 24px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E %3Cpath d='M10 12H92M148 12H230' stroke='%23C29A50' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E %3Cpath d='M92 12c5-6 12-7 16-3c-3 6-10 8-16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M148 12c-5-6-12-7-16-3c3 6 10 8 16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cg transform='translate(120 12)' fill='%23EBC3CE' stroke='%23B77A8C' stroke-width='.7'%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(72)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(216)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Zarte Rose- und Fliederwaesche auf den Flaechen - die eigene Grundfarbe bleibt */
.section-shell {
  background-image:
    radial-gradient(55% 45% at 90% 8%, rgba(235,195,206,.30), transparent 70%),
    radial-gradient(50% 45% at 6% 94%, rgba(205,184,214,.26), transparent 70%);
}
#auftrag, .atelier {
  background-image:
    radial-gradient(50% 40% at 8% 10%, rgba(235,195,206,.26), transparent 70%),
    radial-gradient(45% 40% at 94% 90%, rgba(196,205,177,.24), transparent 70%);
}

/* Bluetenzweige in den Ecken */
.section-shell, #auftrag, .atelier { position: relative; isolation: isolate; overflow: clip; }
.section-shell::before, #auftrag::before, .atelier::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 12px; right: 12px; width: 170px; height: 170px; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E %3Cdefs%3E%3Cg id='b' stroke='%23B77A8C' stroke-width='.7'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E %3Ccircle r='2.4' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/defs%3E %3Cpath d='M8 152C44 128 72 98 92 70S130 24 146 16' fill='none' stroke='%23B89455' stroke-width='1.2' stroke-linecap='round'/%3E %3Cpath d='M38 132c-8-12-6-24 4-28c7 10 5 22-4 28z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M64 104c10-6 22-4 26 5c-11 6-21 4-26-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M96 64c-6-12-2-23 8-26c5 11 1 22-8 26z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M116 42c9-5 19-3 22 5c-9 5-18 3-22-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cuse href='%23b' x='146' y='18' fill='%23EBC3CE'/%3E%3Cuse href='%23b' x='80' y='86' fill='%23F1D5DC'/%3E %3Cuse href='%23b' x='122' y='30' fill='%23E6B7C4'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(180deg);
}
.section-shell::after, #auftrag::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 12px; left: 12px; width: 130px; height: 130px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E %3Cdefs%3E%3Cg id='b' stroke='%23B77A8C' stroke-width='.7'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E %3Ccircle r='2.4' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/defs%3E %3Cpath d='M8 152C44 128 72 98 92 70S130 24 146 16' fill='none' stroke='%23B89455' stroke-width='1.2' stroke-linecap='round'/%3E %3Cpath d='M38 132c-8-12-6-24 4-28c7 10 5 22-4 28z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M64 104c10-6 22-4 26 5c-11 6-21 4-26-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M96 64c-6-12-2-23 8-26c5 11 1 22-8 26z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M116 42c9-5 19-3 22 5c-9 5-18 3-22-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cuse href='%23b' x='146' y='18' fill='%23EBC3CE'/%3E%3Cuse href='%23b' x='80' y='86' fill='%23F1D5DC'/%3E %3Cuse href='%23b' x='122' y='30' fill='%23E6B7C4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Knoepfe: weich gerundet, Rosenholz, ohne Verlauf und Glanz */
.btn-verlauf, .hero .hero-knopf {
  background: var(--rosenholz); background-image: none; color: #FDFAF5; border: 0;
  border-radius: 40px; box-shadow: 0 6px 18px rgba(149,90,99,.18);
  font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 19px 36px; transition: background-color .35s ease, box-shadow .35s ease;
}
.btn-verlauf:hover, .hero .hero-knopf:hover { background: #7E4A52; transform: none; box-shadow: 0 8px 22px rgba(149,90,99,.26); }
.btn-glas {
  background: transparent; color: var(--rosenholz); border: 1px solid var(--rosenholz);
  border-radius: 40px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 18px 34px;
}
.btn-glas:hover { background: rgba(149,90,99,.08); border-color: #7E4A52; }
.hero .hero-link { background-image: linear-gradient(var(--rosenholz), var(--rosenholz)); }
.kachel-text em, .drei-punkte span, .vertrauen-reihe svg { color: var(--rosenholz); }

/* Atelier: die Notiz als Handschrift */
.atelier-notiz { font-family: 'Parisienne', var(--serif); font-style: normal; font-size: 36px; line-height: 1.25; color: var(--violett); }

/* Hero: kleiner Bluetenzweig am Foto */
.hero .hero-photo::after {
  display: block; content: ""; position: absolute; z-index: 3; pointer-events: none;
  inset: auto auto -34px -38px; width: 130px; height: 130px;
  border: 0; border-radius: 0; opacity: 1; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E %3Cdefs%3E%3Cg id='b' stroke='%23B77A8C' stroke-width='.7'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E %3Ccircle r='2.4' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/defs%3E %3Cpath d='M8 152C44 128 72 98 92 70S130 24 146 16' fill='none' stroke='%23B89455' stroke-width='1.2' stroke-linecap='round'/%3E %3Cpath d='M38 132c-8-12-6-24 4-28c7 10 5 22-4 28z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M64 104c10-6 22-4 26 5c-11 6-21 4-26-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M96 64c-6-12-2-23 8-26c5 11 1 22-8 26z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M116 42c9-5 19-3 22 5c-9 5-18 3-22-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cuse href='%23b' x='146' y='18' fill='%23EBC3CE'/%3E%3Cuse href='%23b' x='80' y='86' fill='%23F1D5DC'/%3E %3Cuse href='%23b' x='122' y='30' fill='%23E6B7C4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Biografie ---------- */
.ueber-photo { perspective: none; position: relative; isolation: isolate; }
.ueber-photo img {
  border-radius: 4px; border: 12px solid #FFFDF9; transform: rotate(1.6deg);
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 26px 50px rgba(149,90,99,.22);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.ueber-photo:hover img { transform: rotate(0deg); }
.ueber-photo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -14% -18% -12% -14%;
  background:
    radial-gradient(closest-side at 50% 44%, rgba(235,180,198,.46), transparent 72%),
    radial-gradient(closest-side at 26% 76%, rgba(205,184,214,.40), transparent 70%);
  filter: blur(16px);
}
.ueber-photo::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: -40px; right: -34px; width: 136px; height: 136px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E %3Cdefs%3E%3Cg id='b' stroke='%23B77A8C' stroke-width='.7'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E %3Ccircle r='2.4' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/defs%3E %3Cpath d='M8 152C44 128 72 98 92 70S130 24 146 16' fill='none' stroke='%23B89455' stroke-width='1.2' stroke-linecap='round'/%3E %3Cpath d='M38 132c-8-12-6-24 4-28c7 10 5 22-4 28z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M64 104c10-6 22-4 26 5c-11 6-21 4-26-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M96 64c-6-12-2-23 8-26c5 11 1 22-8 26z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M116 42c9-5 19-3 22 5c-9 5-18 3-22-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cuse href='%23b' x='146' y='18' fill='%23EBC3CE'/%3E%3Cuse href='%23b' x='80' y='86' fill='%23F1D5DC'/%3E %3Cuse href='%23b' x='122' y='30' fill='%23E6B7C4'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(180deg);
}
.ueber-grid p { font-family: var(--serif); font-size: 21px; line-height: 1.75; color: var(--violett-t); }
.ueber-grid .ueber-quote {
  border-left: 0; padding-left: 0; margin-top: 34px;
  font-size: 26px; line-height: 1.45; color: var(--violett) !important;
}
.ueber-quote::before {
  content: ""; display: block; width: 170px; height: 22px; margin: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E %3Cpath d='M10 12H92M148 12H230' stroke='%23C29A50' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E %3Cpath d='M92 12c5-6 12-7 16-3c-3 6-10 8-16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M148 12c-5-6-12-7-16-3c3 6 10 8 16 3z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cg transform='translate(120 12)' fill='%23EBC3CE' stroke='%23B77A8C' stroke-width='.7'%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(72)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(216)'/%3E %3Cellipse cy='-5.6' rx='3.4' ry='5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}
.ueber-grid .liebesgruss { font-family: 'Parisienne', var(--serif); font-size: 46px; line-height: 1.2; color: var(--violett); margin-top: 18px; }
.bio-band img {
  border-radius: 4px; border: 12px solid #FFFDF9;
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 24px 50px rgba(149,90,99,.20);
}

/* ---------- Fusszeile: hell statt schwarz ---------- */
.site-footer {
  background-color: #F4E9E6; color: var(--ink-soft);
  background-image: radial-gradient(45% 60% at 92% 0%, rgba(235,195,206,.45), transparent 70%);
}
.site-footer .brand { color: var(--ink); }
.site-footer h4 { color: var(--violett); }
.site-footer a, .site-footer p, .site-footer span { color: var(--ink-soft); }
.site-footer a:hover { color: var(--rosenholz); }
.footer-bottom { border-top-color: rgba(149,90,99,.22); }

@media (max-width: 1024px) {
  .section-title { font-size: clamp(44px, 12.5vw, 66px); }
  .atelier-text .section-title::after { margin-left: auto; }
  .section-shell::before, #auftrag::before, .atelier::before { width: 110px; height: 110px; top: 8px; right: 8px; }
  .section-shell::after, #auftrag::after { width: 86px; height: 86px; bottom: 8px; left: 8px; }
  .atelier-notiz { font-size: 34px; }
  .ueber-grid p { font-size: 21px; }
  .ueber-grid .ueber-quote { font-size: 25px; }
  .ueber-quote::before { margin-left: auto; margin-right: auto; background-position: center; }
  .ueber-photo::after { width: 104px; height: 104px; top: -30px; right: -18px; }
  .hero .hero-photo::after { width: 104px; height: 104px; left: -22px; bottom: -28px; }
  .ueber-grid .liebesgruss { font-size: 44px; }

  html.breit-aufgebaut .section-title { font-size: calc(46.875 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .section-title::after { width: calc(210 * 100vw / var(--breit-basis, 469)); height: calc(24 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .hero .hero-strich, html.breit-aufgebaut .blatt-strich { height: calc(24 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .atelier-notiz { font-size: calc(34 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .ueber-grid p { font-size: calc(21 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .ueber-grid .ueber-quote { font-size: calc(25 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .ueber-grid .liebesgruss { font-size: calc(44 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .section-shell::before, html.breit-aufgebaut #auftrag::before, html.breit-aufgebaut .atelier::before { width: calc(110 * 100vw / var(--breit-basis, 469)); height: calc(110 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .section-shell::after, html.breit-aufgebaut #auftrag::after { width: calc(86 * 100vw / var(--breit-basis, 469)); height: calc(86 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .btn-verlauf, html.breit-aufgebaut .btn-glas { font-size: calc(14 * 100vw / var(--breit-basis, 469)); padding: calc(20 * 100vw / var(--breit-basis, 469)) calc(30 * 100vw / var(--breit-basis, 469)); }
}


/* ---------- Nachbesserung Liebe ---------- */
/* Atelier: der Anfrage-Knopf bekommt denselben Rosenholz-Stil wie die anderen */
.atelier-text .btn {
  display: inline-flex; background: var(--rosenholz); color: #FDFAF5; border: 0; border-radius: 40px;
  box-shadow: 0 6px 18px rgba(149,90,99,.18);
  font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 19px 36px;
  transition: background-color .35s ease;
}
.atelier-text .btn:hover { background: #7E4A52; transform: none; }
/* Biografie: alte Linie ueber dem Zitat entfernen - dort sitzt jetzt die Bluetenranke */
.ueber-grid .ueber-quote { border-top: 0; border-left: 0; padding-top: 0; padding-left: 0; }
@media (max-width: 1024px) {
  .ueber-grid .ueber-quote { border-top: 0; padding-top: 0; }
  html.breit-aufgebaut .atelier-text .btn { font-size: calc(14 * 100vw / var(--breit-basis, 469)); padding: calc(20 * 100vw / var(--breit-basis, 469)) calc(30 * 100vw / var(--breit-basis, 469)); }
}


/* ============================================================
   Startseite: Faecher aus drei Raumfotos statt Sammlungs-Kachel
   Wie Abzuege, die leicht versetzt uebereinander liegen.
   ============================================================ */
.sammlung-faecher { display: block; max-width: 820px; margin: 46px auto 0; color: inherit; text-decoration: none; }
.sammlung-faecher:focus-visible { outline: 1px solid var(--rosenholz); outline-offset: 10px; }
.faecher-bilder { position: relative; display: block; aspect-ratio: 820 / 480; }
.faecher-bilder img {
  position: absolute; bottom: 0; left: 50%; width: 34%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 10px solid #FFFDF9; border-radius: 3px;
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 22px 44px rgba(149,90,99,.22);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .8s ease;
}
.faecher-bilder .mitte  { width: 40%; z-index: 2; transform: translateX(-50%) rotate(.6deg); }
.faecher-bilder .links  { z-index: 1; transform: translateX(-118%) translateY(-6%) rotate(-7deg); }
.faecher-bilder .rechts { z-index: 1; transform: translateX(18%) translateY(-6%) rotate(6deg); }
.sammlung-faecher:hover .mitte  { transform: translateX(-50%) translateY(-2%) rotate(0deg); box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 30px 56px rgba(149,90,99,.28); }
.sammlung-faecher:hover .links  { transform: translateX(-126%) translateY(-8%) rotate(-10deg); }
.sammlung-faecher:hover .rechts { transform: translateX(26%) translateY(-8%) rotate(9deg); }

.faecher-text { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; }
.faecher-zahl { font-family: 'Parisienne', var(--serif); font-size: 48px; line-height: 1.1; color: var(--violett); }
.faecher-knopf {
  display: inline-block; background: var(--rosenholz); color: #FDFAF5; border-radius: 40px;
  padding: 17px 34px; box-shadow: 0 6px 18px rgba(149,90,99,.18);
  font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .35s ease;
}
.sammlung-faecher:hover .faecher-knopf { background: #7E4A52; }

@media (max-width: 1024px) {
  .faecher-bilder { aspect-ratio: 1 / .84; }
  .faecher-bilder img { width: 42%; border-width: 7px; }
  .faecher-bilder .mitte  { width: 52%; }
  .faecher-bilder .links  { transform: translateX(-112%) translateY(-5%) rotate(-6deg); }
  .faecher-bilder .rechts { transform: translateX(12%) translateY(-5%) rotate(5deg); }
  .faecher-zahl { font-size: 46px; }
  .faecher-knopf { font-size: 14px; padding: 18px 34px; }

  html.breit-aufgebaut .sammlung-faecher { max-width: none; }
  html.breit-aufgebaut .faecher-bilder img { border-width: calc(7 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .faecher-zahl { font-size: calc(46 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .faecher-knopf { font-size: calc(14 * 100vw / var(--breit-basis, 469)); padding: calc(18 * 100vw / var(--breit-basis, 469)) calc(34 * 100vw / var(--breit-basis, 469)); }
}
@media (prefers-reduced-motion: reduce) { .faecher-bilder img, .faecher-knopf { transition: none; } }


/* ============================================================
   Kontaktseite: Portraet der Kuenstlerin neben dem Formular
   ============================================================ */
.kontakt-raster {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 620px);
  gap: 70px; justify-content: center; align-items: center;
}
.kontakt-raster .kontakt-form { margin: 0; width: 100%; }
.kontakt-portrait { margin: 0; text-align: center; position: relative; isolation: isolate; }
/* Bogenfenster: oben rund, unten weich - im weissen Rand wie ein Abzug */
.portrait-bogen {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 8px 8px; border: 10px solid #FFFDF9;
  box-shadow: 0 2px 5px rgba(90,60,35,.10), 0 26px 50px rgba(149,90,99,.22);
}
.portrait-bogen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.kontakt-portrait::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -8% -16% 22% -16%;
  background:
    radial-gradient(closest-side at 50% 42%, rgba(235,180,198,.48), transparent 72%),
    radial-gradient(closest-side at 24% 78%, rgba(205,184,214,.40), transparent 70%);
  filter: blur(16px);
}
.kontakt-portrait::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: -30px; top: 56%; width: 120px; height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E %3Cdefs%3E%3Cg id='b' stroke='%23B77A8C' stroke-width='.7'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E %3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E %3Ccircle r='2.4' fill='%23C29A50' stroke='none'/%3E%3C/g%3E%3C/defs%3E %3Cpath d='M8 152C44 128 72 98 92 70S130 24 146 16' fill='none' stroke='%23B89455' stroke-width='1.2' stroke-linecap='round'/%3E %3Cpath d='M38 132c-8-12-6-24 4-28c7 10 5 22-4 28z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M64 104c10-6 22-4 26 5c-11 6-21 4-26-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M96 64c-6-12-2-23 8-26c5 11 1 22-8 26z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cpath d='M116 42c9-5 19-3 22 5c-9 5-18 3-22-5z' fill='%23C4CDB1' stroke='%239FAE8E' stroke-width='.7'/%3E %3Cuse href='%23b' x='146' y='18' fill='%23EBC3CE'/%3E%3Cuse href='%23b' x='80' y='86' fill='%23F1D5DC'/%3E %3Cuse href='%23b' x='122' y='30' fill='%23E6B7C4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kontakt-portrait figcaption { display: grid; gap: 8px; margin-top: 26px; }
.portrait-gruss {
  font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.45;
  color: var(--violett-t); max-width: 24ch; margin: 0 auto;
}
.portrait-name { font-family: 'Parisienne', var(--serif); font-size: 38px; line-height: 1.2; color: var(--violett); }

@media (max-width: 1024px) {
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .kontakt-portrait { max-width: 290px; margin: 0 auto; }
  .kontakt-portrait::after { width: 96px; height: 96px; left: -34px; }
  .portrait-bogen { border-width: 8px; }
  .portrait-gruss { font-size: 22px; }
  .portrait-name { font-size: 38px; }
  .kontakt-raster .kontakt-form { margin: 0 auto; }

  html.breit-aufgebaut .kontakt-portrait { max-width: calc(290 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .kontakt-portrait::after { width: calc(96 * 100vw / var(--breit-basis, 469)); height: calc(96 * 100vw / var(--breit-basis, 469)); left: calc(-34 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .portrait-bogen { border-width: calc(8 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .portrait-gruss { font-size: calc(22 * 100vw / var(--breit-basis, 469)); }
  html.breit-aufgebaut .portrait-name { font-size: calc(38 * 100vw / var(--breit-basis, 469)); }
}


/* ---------- AGB-Seite ---------- */
.legal h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 26px 0 10px; color: var(--ink); }
.legal-hinweis {
  background: var(--shell); border-left: 3px solid var(--rosenholz);
  padding: 18px 22px; margin-bottom: 30px; border-radius: 0 4px 4px 0;
}
.widerruf-formular {
  background: var(--shell); border: 1px solid var(--line);
  padding: 24px 26px; border-radius: 4px; margin-top: 16px;
}
.widerruf-formular p { margin-bottom: 14px; }
.widerruf-formular .klein { font-size: 14px; margin-bottom: 0; }