/* Schriften lokal einbinden - keine Verbindung zu Google.
   Die Dateien gehoeren in den Ordner "fonts". Fehlen sie, greift die
   Fallback-Schrift und die Seite funktioniert trotzdem.
   Cormorant Garamond und Source Serif 4: SIL Open Font License 1.1 */
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:light;
  --paper:#F6F3EC;
  --paper-deep:#ECE6D9;
  --ink:#14294B;
  --navy:#1B3A6B;
  --nacht:#172331;         /* Hintergrundton des Hero-Fotos - Hero geht nahtlos ins Foto über */
  --ink-soft:#3E4A60;      /* Fliesstext grau - Kontrast 7:1 auf Creme */
  /* Gold in zwei Stufen:
     --gold      fuer Schrift und Linien auf Creme (Kontrast 4,8-5,3:1)
     --gold-hell fuer Buttons und Schrift auf Navy (Kontrast 4,8:1) */
  --gold:#7E5F26;
  --gold-hell:#C9A45C;
  --gold-linie:#B8955A;    /* nur fuer Linien, nicht fuer Schrift */
  --line:rgba(15,30,56,.16);
  --measure:34rem;
  --display:"Cormorant Garamond",Garamond,Georgia,serif;
  --body:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.measure{max-width:var(--measure)}
section{padding-block:clamp(4rem,10vw,8rem)}

/* Abwechselnde Baender - die Farbe trennt, nicht eine Linie */
.band-a{background:var(--paper)}
.band-b{background:var(--paper-deep)}
.band-dark{background:var(--nacht);color:var(--paper)}
.band-dark h2,.band-dark h3{color:var(--paper)}
.band-dark p{color:rgba(246,243,236,.86)}
.band-dark .eyebrow{color:var(--gold-hell)}
.band-dark .lead{color:rgba(246,243,236,.86)}
.band-dark .btn{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--ink)}
.band-dark .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Rechtstexte */
.ds-h{
  font-family:var(--display);font-weight:600;letter-spacing:0;
  font-size:1.6rem;margin:2.5rem 0 .75rem;
}
.ds-sub{font-weight:600;margin:1.5rem 0 .5rem}
.ds-h + p, .ds-sub + p{margin-top:0}

#kontakt{min-height:62vh;display:flex;align-items:center}
#kontakt>.wrap{width:min(72rem,100% - 2.5rem)}

/* Labels ueber den Ueberschriften */
.eyebrow{
  font-family:var(--body);font-weight:600;
  font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.25rem;
}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:0;line-height:1.1;margin:0 0 1rem}
h1{font-size:clamp(2.8rem,7vw,5rem);line-height:1.05}
h2{font-size:clamp(2.1rem,4.2vw,3.2rem)}
h3{font-size:1.6rem;font-weight:600;line-height:1.2}
p{margin:0 0 1.1rem}
.lead{font-size:clamp(1.15rem,2vw,1.3rem);color:var(--ink-soft)}
a{color:var(--gold)}

/* Header */
header{padding-block:clamp(1.5rem,3vw,2.25rem);font-family:var(--body);font-size:.92rem}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
header a{text-decoration:none;color:var(--ink)}
header a:hover{color:var(--gold)}
header nav{display:flex;gap:1.6rem;flex-wrap:wrap}
header nav a{letter-spacing:.02em}
header nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (max-width:40rem){
  header .wrap{flex-direction:column;align-items:flex-start;gap:.75rem}
  header nav{gap:.6rem 1.1rem;font-size:.85rem}
}
/* Der Name ist die Wortmarke */
.wortmarke{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.8rem,4vw,2.5rem);
  letter-spacing:.01em;line-height:1;
}

/* Hero */
.top{background:var(--nacht);color:var(--paper)}
.top header a{color:var(--paper)}
.top header a:hover{color:var(--gold-hell)}
.hero{background:transparent;color:var(--paper);padding-top:clamp(2.5rem,7vw,5rem)}
.hero h1{color:var(--paper)}
/* "Deine Stimme." - kursiv mit feiner Goldlinie darunter */
.hero h1 em{
  font-style:italic;
  text-decoration:underline;text-decoration-color:var(--gold-hell);
  text-decoration-thickness:3px;text-underline-offset:.16em;
  text-decoration-skip-ink:none;
}
.nowrap{white-space:nowrap}
.hero .eyebrow{color:var(--gold-hell)}
.hero .lead{color:rgba(246,243,236,.88)}
.hero .note{color:rgba(246,243,236,.8)}
.hero .btn{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--ink)}
.hero .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Kundinnen-Stimme im Hero */
.hero-stimme{
  margin:2rem 0 0;padding:0 0 0 1.1rem;border-left:2px solid var(--gold-hell);
}
.hero-stimme p{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:1.3;color:var(--paper);margin:0 0 .4rem;
}
.hero-stimme cite{font-style:normal;font-size:.85rem;letter-spacing:.04em;color:rgba(246,243,236,.8)}

.hero-top{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}

/* Ab Tablet: Foto als Hintergrund hinter dem Text.
   Der Verlauf liegt nur links hinter dem Text - ueber dem Gesicht liegt nichts. */
@media (min-width:85rem){
  .top{
    background-image:
      linear-gradient(180deg,var(--nacht) 13%,rgba(23,35,49,0) 30%),
      linear-gradient(90deg,
        var(--nacht) 0%,
        rgba(23,35,49,.9) 36%,
        rgba(23,35,49,.5) 50%,
        rgba(23,35,49,0) 64%),
      url("bilder/hero.jpg");
    background-size:100% 100%,100% 100%,auto 86%;
    background-position:0 0,0 0,right bottom;
    background-repeat:no-repeat;
    min-height:46rem;
  }
  .hero .portrait{display:none}
  .hero-top>div{max-width:33rem}
  .hero .measure{max-width:31rem}
}

/* Bilder - klare Kante, kein Verlauf */
.portrait{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  display:block;background:var(--paper-deep);
}
/* Handy/Tablet: Hero-Foto als eigenes Bild unter dem Text */
.hero .portrait{object-position:78% 20%;margin-top:clamp(1rem,4vw,2rem)}

/* Ueber mich: Text links, Foto rechts, beides nebeneinander */
.about-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (min-width:60rem){.about-grid{grid-template-columns:1fr .75fr}}
.about-grid .portrait{aspect-ratio:3/4;object-position:50% 15%}
.about-grid em{font-style:italic}

ul.quals{
  list-style:none;padding:0;margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;gap:1.25rem 2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border-top:1px solid var(--line);padding-top:1.75rem;
}
ul.quals li{font-size:.98rem;line-height:1.5}
ul.quals span{
  display:block;font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;
}

/* Zweispaltige Abschnitte: Ueberschrift links, Inhalt rechts */
@media (min-width:60rem){
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:start}
  .split>.split-text{padding-top:2.4rem}
  .split h2{margin-bottom:0}
}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:1rem 2rem;border-radius:0;border:1px solid var(--ink);
  transition:background .15s ease,color .15s ease;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem}
.note{font-size:.9rem;color:var(--ink-soft);margin-top:1rem;line-height:1.6}

/* Karten - keine Kaesten, eine goldene Linie oben */
.cards{display:grid;gap:2.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:3rem}
.card{border-top:2px solid var(--gold-linie);padding-top:1.5rem}
.card p:last-child{margin-bottom:0}
.card p{font-size:1rem;color:var(--ink-soft)}
.card .nutzen{color:var(--ink)}
.card .price,.price{font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.2;color:var(--gold);margin:.25rem 0 0}
.price small{font-size:1.05rem;font-weight:500}
.card .field,.field{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.angebot-kopf .split-text p{color:var(--ink-soft)}

/* Schritte (echte Reihenfolge -> Nummerierung traegt Information) */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;border-bottom:1px solid var(--line)}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;padding:1.6rem 0;border-top:1px solid var(--line)}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-style:italic;font-size:1.7rem;line-height:1.1;color:var(--gold)}
ol.steps h3{margin-bottom:.5rem}
ol.steps p{margin:0;color:var(--ink-soft)}

/* Zitate */
.testimonial{display:grid;gap:clamp(1.5rem,4vw,3rem);margin-top:3rem;align-items:start}
@media (min-width:60rem){.testimonial{grid-template-columns:1fr 1fr;gap:5rem}}
blockquote.pull{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.25;
  border-left:0;padding:0;margin:0;
}
/* Anfuehrungszeichen als Zeichen der Seite, nicht im Text */
blockquote.pull::before{content:"\201E"}
blockquote.pull::after{content:"\201C"}
blockquote.pull::before,blockquote.pull::after{color:var(--gold)}
.testimonial + .testimonial{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.testimonial-body{font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.testimonial-body p:last-of-type{margin-bottom:0}
p.attrib{
  font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-top:1.25rem !important;
}
/* Aufklappbarer Rest des Testimonials */
.testimonial-body details{margin:0 0 1.1rem}
.testimonial-body summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-weight:600;font-size:.92rem;letter-spacing:.03em;color:var(--gold);
  border-bottom:1px solid currentColor;padding-bottom:.1rem;
}
.testimonial-body summary::-webkit-details-marker{display:none}
.testimonial-body summary::after{content:" +"}
.testimonial-body details[open] summary::after{content:" \2212"}
.testimonial-body details[open] summary{margin-bottom:1.1rem}
.testimonial-body summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Kontakt */
.contact-list{list-style:none;padding:0;margin:0;font-size:1.05rem;border-bottom:1px solid rgba(246,243,236,.22)}
.contact-list li{
  padding:1.1rem 0;display:grid;gap:.25rem 1rem;border-top:1px solid rgba(246,243,236,.22);
  grid-template-columns:1fr;align-items:baseline;
}
@media (min-width:30rem){.contact-list li{grid-template-columns:7rem 1fr}}
.contact-list .ck{color:var(--gold-hell);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem}
.contact-list a{color:var(--paper);text-underline-offset:4px}
.contact-list a:hover{color:var(--gold-hell)}
.contact-list .hinweis{display:inline-block;margin-top:.3rem;font-size:.9rem;color:rgba(246,243,236,.8)}
@media (max-width:59.99rem){.contact-list{margin-top:2.5rem}}

/* Newsletter */
#newsletter h2 em{font-style:italic}

footer{padding-block:2.5rem;background:var(--ink);border-top:2px solid var(--gold-hell);font-size:.88rem;color:rgba(246,243,236,.8)}
footer a{color:rgba(246,243,236,.92)}
footer a:hover{color:var(--gold-hell)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
#newsletter h2.nl-titel{letter-spacing:.06em}

/* Newsletter mittig - keine leere rechte Haelfte */
#newsletter .measure{margin-inline:auto;text-align:center;max-width:38rem}
#newsletter .btn-row{justify-content:center}
/* Ablauf: Ueberschrift bleibt beim Scrollen stehen */
@media (min-width:60rem){#ablauf .split>div:first-child{position:sticky;top:2.5rem}}

/* Projekte: Branche, Name und Text stehen in allen Karten auf gleicher Hoehe */
@media (min-width:60rem){
  .cards-projekte{grid-template-columns:repeat(3,1fr)}
  @supports (grid-template-rows:subgrid){
    .cards-projekte .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  }
}

/* Ueber mich: Foto auf Hoehe der Textmitte, klare Kante mit feinem Goldrahmen */
@media (min-width:60rem){.about-grid{align-items:center}}
.about-grid .portrait{
  -webkit-mask-image:none;mask-image:none;
  outline:1px solid var(--gold-linie);outline-offset:14px;
}
@media (max-width:59.99rem){.about-grid .portrait{width:calc(100% - 28px);margin:14px auto}}

/* Kopfleiste im Hero: Navigation in Gold, Name gross und weiss */
.top header nav a{color:var(--gold-hell)}
.top header nav a:hover{color:var(--paper)}
.top header .wortmarke{color:var(--paper);font-size:clamp(2.1rem,5vw,3.1rem)}
.top header .wortmarke:hover{color:var(--paper)}

/* Hero-Label groesser */
.hero .eyebrow{font-size:clamp(.9rem,1.5vw,1.1rem);letter-spacing:.16em;margin-bottom:1.5rem}
/* Label steht im h1 (fuer Google), sieht aber aus wie vorher */
.hero h1 .eyebrow{display:block;font-family:var(--body);line-height:1.5}
.hero .eyebrow{font-size:clamp(1rem,1.7vw,1.2rem)}
@media (min-width:60rem){.hero .eyebrow{white-space:nowrap;font-size:1.2rem;letter-spacing:.1em}}

/* Mittlere Bildschirme (Tablet quer, kleine Laptops): Foto neben dem Text statt dahinter,
   damit es den Text nicht ueberdeckt */
@media (min-width:60rem) and (max-width:84.99rem){
  .hero-top{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero .portrait{display:block;margin-top:0;aspect-ratio:4/5;object-position:80% 20%}
  .hero .eyebrow{white-space:normal}
}

/* Name in der Kopfleiste: groesser und mit mehr Abstand nach oben */
.top header{padding-top:clamp(3rem,8vw,6.5rem)}
.top .hero{padding-top:clamp(2rem,5vw,3.5rem)}
.top header .wortmarke{font-size:clamp(2.4rem,5.5vw,3.6rem)}

/* Buttons kleiner, damit sie in Relation zum Text stehen */
.btn{font-size:.92rem;padding:.75rem 1.4rem;letter-spacing:.03em}

/* Wortmarke wie das Logo: Name mit goldenem Punkt, darunter Goldlinie und COPYWRITING */
.wortmarke{display:inline-flex;flex-direction:column;align-items:stretch;gap:.28em;font-weight:500;letter-spacing:.005em}
.wm-name{white-space:nowrap}
.wm-punkt{color:var(--gold-linie)}
.wm-zeile{display:flex;align-items:center;gap:1em;font-size:max(.27em,11px);line-height:1;margin-top:.15em}
.wm-linie{flex:1;height:2px;background:var(--gold-linie)}
.wm-sub{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.5em;margin-right:-.5em;color:var(--gold);white-space:nowrap}
.top .wm-sub,.top .wm-punkt{color:var(--gold-hell)}
.top .wm-linie{background:var(--gold-hell)}
/* Auf hellem Grund (Impressum, Datenschutz): Schrift dunkler fuer Lesbarkeit */

@media (max-width:40rem){header .wrap{gap:1.25rem}}


/* Angebote in zwei Gruppen: 2 Pakete fuer Sichtbarkeit, 3 Pakete fuer Website */
.gruppe{font-family:var(--display);font-size:1.5rem;font-style:italic;color:var(--ink);margin:4rem 0 0}
.gruppe + .cards{margin-top:1.5rem}
@media (min-width:60rem){
  .cards-zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem}
  .cards-drei{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 3rem}
}
@media (min-width:60rem){
  .cards-zwei .card,.cards-drei .card{display:flex;flex-direction:column}
  .cards-zwei .card .price,.cards-drei .card .price{margin-top:auto;padding-top:.5rem}
}

/* Newsletter-Anmeldung direkt auf der Seite (statt Brevo-Fenster) */
.nl-form{margin-top:1.75rem;text-align:left}
.nl-zeile{display:flex;gap:.6rem;flex-wrap:wrap}
.nl-zeile input{
  flex:1 1 11rem;min-width:0;
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--gold-linie);border-radius:0;
  padding:.75rem 1rem;
}
.nl-zeile input::placeholder{color:var(--ink-soft);opacity:.75}
.nl-zeile input:focus{outline:2px solid var(--gold);outline-offset:2px}
.nl-zeile .btn{flex:0 0 auto;cursor:pointer}
.nl-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.nl-check input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--ink);flex:0 0 auto}
.nl-unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (max-width:30rem){.nl-zeile .btn{width:100%}}

/* "GESCHRIEBEN." - Goldlinie wie bei "Deine Stimme." im Hero */
#newsletter h2.nl-titel em{
  text-decoration:underline;text-decoration-color:var(--gold-linie);
  text-decoration-thickness:3px;text-underline-offset:.16em;
  text-decoration-skip-ink:none;
}