@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cgi.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --nacht:#14233A;
  --messing:#C2A46E;
  --messing-hell:#A88B57;
  --creme:#F5F1EA;
  --taube:#8F9BAD;
  --text:#14233A;
  --text-leise:#4A5568;
  --max:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--text);font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:112px 0}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.15;color:var(--nacht)}
h1{font-size:clamp(40px,6vw,68px)}
h2{font-size:clamp(32px,4.4vw,48px);margin-bottom:28px}
h3{font-size:28px;margin-bottom:12px}
p+p{margin-top:16px}
.linie{width:96px;height:1px;background:var(--messing-hell);margin:28px 0}
.mitte{text-align:center}
.mitte .linie{margin-left:auto;margin-right:auto}
.leise{color:var(--text-leise)}

/* Kopf */
.kopf{background:var(--nacht);color:var(--creme)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.marke{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.28em;font-size:18px;text-decoration:none;color:var(--creme)}
.nav a.knopf-klein{font-size:14px;letter-spacing:.08em;text-decoration:none;color:var(--messing);border-bottom:1px solid var(--messing);padding-bottom:2px}
.held{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;padding:72px 0 120px}
.held h1{color:var(--creme)}
.held .claim{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:26px;color:var(--messing)}
.held p.unter{color:#D9DEE6;font-size:19px;max-width:34em}
.held .gruender{margin-top:20px;font-size:14px;letter-spacing:.06em;color:var(--taube)}
.foto{aspect-ratio:4/5;background:#1E3150;border:1px solid rgba(194,164,110,.5);display:flex;align-items:center;justify-content:center;color:var(--taube);font-size:14px;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}

.knopf{display:inline-block;margin-top:36px;padding:16px 34px;border:1px solid var(--messing);color:var(--creme);text-decoration:none;letter-spacing:.1em;font-size:14px;text-transform:uppercase;transition:background .2s}
.knopf:hover{background:rgba(194,164,110,.15)}
.knopf.dunkel{color:var(--nacht);border-color:var(--messing-hell)}
.knopf.dunkel:hover{background:rgba(168,139,87,.12)}

/* Problem */
.problem ul{list-style:none;margin:8px 0 28px;max-width:40em}
.problem li{padding:18px 0;border-bottom:1px solid rgba(20,35,58,.12);font-size:19px}
.problem li:first-child{border-top:1px solid rgba(20,35,58,.12)}

/* Angebote */
.angebote{background:#EFE9DF}
.karten{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:16px}
.karte{background:var(--creme);padding:44px 40px;border-top:1px solid var(--messing-hell)}
.karte .art{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--taube);margin-bottom:8px}
.karte .preis{margin-top:24px;font-family:"Cormorant Garamond",serif;font-size:26px}
.karte .knopf{margin-top:20px}
.zusatz{margin-top:32px;color:var(--text-leise)}

/* Unternehmen */
.navlinks{display:flex;gap:28px;align-items:center}
.nav a.navlink{font-size:14px;letter-spacing:.08em;text-decoration:none;color:#D9DEE6}
.nav a.navlink:hover{color:var(--creme)}
.zusatz a{color:var(--nacht);text-decoration:none;border-bottom:1px solid rgba(168,139,87,.6)}
.zweispaltig{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.unternehmen .zeile{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--messing-hell);margin-bottom:12px}
.themen{list-style:none}
.themen li{padding:24px 0;border-bottom:1px solid rgba(20,35,58,.12)}
.themen li:first-child{border-top:1px solid var(--messing-hell)}
.themen h3{font-size:26px;margin-bottom:6px}
.themen p{color:var(--text-leise)}

/* Werftplan */
.werftplan{background:var(--nacht);color:#D9DEE6}
.werftplan h2{color:var(--creme)}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;counter-reset:s}
.schritt{padding:32px 28px 8px 0;border-top:1px solid var(--messing);position:relative}
.schritt::before{counter-increment:s;content:"0" counter(s);font-family:"Cormorant Garamond",serif;color:var(--messing);font-size:22px;display:block;margin-bottom:10px}
.schritt h3{color:var(--creme);font-size:26px}

/* Über mich */
.ueber{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.ueber .zeile{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--messing-hell);margin-bottom:12px}
.leitsatz{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:26px;line-height:1.35;margin-top:28px;color:var(--nacht)}

/* Werftcheck */
.werftcheck{background:#EFE9DF}
.formular{margin-top:40px;background:var(--creme);padding:32px 24px;border-top:1px solid var(--messing-hell);text-align:left}
.formular iframe{display:block;border:0;width:100%}
.hinweis{font-size:14px;color:var(--text-leise);margin-top:20px;max-width:46em}

/* Kontakt */
.kontakt .wege{margin-top:32px;font-size:15px;letter-spacing:.04em;color:var(--text-leise)}
.kontakt .wege a{text-decoration:none;border-bottom:1px solid rgba(168,139,87,.6)}

/* Fuß */
footer{background:var(--nacht);color:var(--taube);padding:56px 0;font-size:14px}
footer .reihe{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--creme);text-decoration:none;margin-left:24px}
footer .marke{font-size:15px}

/* Rechtstexte */
.recht{padding:72px 0 112px;max-width:760px}
.recht h1{font-size:44px;margin-bottom:32px}
.recht h2{font-size:26px;margin:40px 0 10px}
.recht p{color:var(--text)}

@media (max-width:820px){
  section{padding:80px 0}
  .held,.ueber,.karten,.zweispaltig{grid-template-columns:1fr;gap:40px}
  .held{padding:40px 0 80px}
  .schritte{grid-template-columns:1fr 1fr;gap:0 24px}
  .karte{padding:36px 28px}
  footer a{margin:0 20px 0 0}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .schritte{grid-template-columns:1fr}
  .nav a.knopf-klein{display:none}
  .nav a.navlink{font-size:13px}
  .marke{font-size:15px;letter-spacing:.22em}
}