/* 53N8O.de – eigenständige statische Gestaltung ohne externe Bibliotheken */
:root {
  color-scheme: light;
  --ink:#10283c; --ink-soft:#385263; --sea:#287f9f; --sea-dark:#176580;
  --coral:#d85948; --sand:#e9d3af; --paper:#fcfaf5; --cream:#f6f0e5;
  --line:#d9d4c9; --shadow:0 18px 54px rgba(22,43,56,.11);
  --radius:23px; --max:1180px;
}
* { box-sizing: border-box; }
html {scroll-behavior:smooth; scroll-padding-top:110px;}
body {margin:0; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; line-height:1.7; font-size:16px; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;}
img {display:block; max-width:100%;}
a {color:var(--sea-dark); text-underline-offset:.22em;}
a:hover {color:#ac4e3d;}
button, a { -webkit-tap-highlight-color:transparent; }
a:focus-visible {outline:3px solid #d85948; outline-offset:4px; border-radius:6px;}
.container {width:min(var(--max), calc(100% - 48px)); margin-inline:auto;}
.skip {position:absolute; left:14px; top:-100px; padding:8px 14px; background:white; z-index:1000;}
.skip:focus {top:8px;}
/* Kopfbereich */
.header {position:sticky; top:0; z-index:30; background:rgba(252,250,245,.93); border-bottom:1px solid #e8e1d5; backdrop-filter:blur(16px);}
.header-inner {display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:93px;}
.brand {display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; min-width:max-content;}
.brand:hover {color:var(--ink);}
.brand-icon {height:52px; width:52px; filter:drop-shadow(0 3px 6px rgba(10,32,45,.12));}
.brand-copy {display:flex; flex-direction:column; line-height:1.05;}
.brand-name {font-weight:850; letter-spacing:-.045em; font-size:26px;}
.brand-name span {font-weight:600; color:var(--sea);}
.brand-tag {font-size:10px; text-transform:uppercase; font-weight:750; color:#69808c; letter-spacing:.13em; padding-top:7px;}
.nav {display:flex; align-items:center; flex-wrap:wrap; column-gap:27px; row-gap:6px;}
.nav a {font-weight:650; font-size:14px; color:var(--ink-soft); text-decoration:none; border-bottom:2px solid transparent; padding:8px 0; transition:color .2s,border-color .2s;}
.nav a:hover,.nav a[aria-current="page"] {color:var(--ink); border-color:var(--coral);}
.nav .nav-contact {background:var(--ink); color:white; padding:10px 17px; border-radius:12px; border:0;}
.nav .nav-contact:hover {color:white; background:var(--sea-dark);}
/* Start */
main {overflow:clip;}
.hero-wrap {position:relative; background:radial-gradient(circle at 88% 16%, rgba(223,191,141,.27), transparent 33%),linear-gradient(180deg,#f8f3e9 0%,var(--paper) 100%);}
.hero {display:grid; grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr); align-items:center; gap:60px; padding-block:76px 90px;}
.eyebrow {display:inline-flex; align-items:center; gap:11px; font-size:12px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; color:var(--sea-dark);}
.eyebrow::before {content:""; width:29px; height:3px; background:var(--coral); border-radius:10px;}
h1,h2,h3,p {margin-top:0;}
h1,h2,h3 {line-height:1.15; letter-spacing:-.035em;}
h1 {font-size:clamp(43px,4.6vw,70px); margin:21px 0 24px; font-weight:820;}
h1 em {font-style:normal; color:var(--sea-dark);}
.hero-text .lead {font-size:18px; line-height:1.78; max-width:50ch; color:var(--ink-soft); margin-bottom:28px;}
.hero-meta {display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 32px;}
.hero-meta span {font-size:12px; background:#f4e8d8; border:1px solid #e7d5b8; padding:5px 12px; border-radius:30px; color:#5b6061; font-weight:700;}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; font-weight:760; padding:13px 21px; text-decoration:none; transition:transform .18s, background-color .18s;}
.btn:hover {transform:translateY(-2px);}
.btn-primary {color:#fff; background:var(--ink); box-shadow:0 8px 23px #10283c25;}
.btn-primary:hover {color:white; background:var(--sea-dark);}
.btn-outline {color:var(--ink); border:1px solid #c8d1d3; background:transparent;}
.btn-outline:hover {background:#eef4f3; color:var(--ink);}
.hero-image {margin:0; position:relative; padding:8px; background:#fff; box-shadow:var(--shadow); border-radius:calc(var(--radius) + 7px); transform:rotate(1deg);}
.hero-image img {width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius);}
.hero-image::after {content:""; position:absolute; width:88px; height:7px; left:38px; bottom:-15px; background:var(--coral); border-radius:50px; transform:rotate(-1deg); opacity:.8;}
.hero-image figcaption {font-size:11px; color:#567; text-align:right; padding:6px 4px 0;}
/* Inhalt */
.section {padding-block:78px;}
.section-heading {max-width:680px; margin-bottom:34px;}
h2 {font-size:clamp(32px,3.5vw,46px); margin:13px 0 16px;}
.section-heading p,.section-intro {color:var(--ink-soft); font-size:17px; max-width:65ch;}
.grid-three {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px;}
.card {border-radius:var(--radius); border:1px solid #e4ded5; padding:30px 29px 27px; background:#fffefa; box-shadow:0 6px 20px rgba(24,40,50,.035); position:relative;}
.card::before {content:""; position:absolute; inset:0 auto auto 29px; width:54px; height:4px; border-radius:0 0 8px 8px; background:var(--sea);}
.card:nth-child(2)::before {background:var(--coral);}
.card:nth-child(3)::before {background:#c49b5a;}
.card-number {font-weight:850; color:#91a1a7; font-size:12px; letter-spacing:.12em; display:block; margin-bottom:21px;}
.card h3 {font-size:25px; margin-bottom:12px;}
.card p {margin:0; color:var(--ink-soft); line-height:1.75; font-size:15px;}
/* Persönlicher Teil */
.story-wrap {background:#f0e8dc; border-top:1px solid #e5dbc9; border-bottom:1px solid #e5dbc9;}
.story {display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; gap:62px; padding-block:86px;}
.story-image {margin:0; padding:8px; background:#fff; border-radius:calc(var(--radius) + 8px); box-shadow:var(--shadow); transform:rotate(-1deg);}
/* Originalformat beibehalten: das Comicmotiv vollständig und ohne Beschnitt anzeigen. */
.story-image img {display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:var(--radius);}
.story-copy h2 {margin-bottom:23px;}
.story-copy p {font-size:17px; color:#344e5c;}
.story-copy p:last-of-type {margin-bottom:29px;}
.story-note {display:flex; align-items:center; gap:12px; border-top:1px solid #d9cbbb; padding-top:20px; margin-top:28px; color:#536d7c; font-size:14px; font-weight:650;}
.story-note::before {content:""; width:8px; height:8px; flex:none; background:var(--coral); border-radius:50%;}
/* Kontakt */
.contact-panel {position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:45px 50px; background:var(--ink); color:#fff; border-radius:26px;}
.contact-panel::after {content:""; position:absolute; width:340px; height:340px; border:1px solid rgba(202,222,221,.14); border-radius:50%; right:-120px; top:-170px; box-shadow:0 0 0 70px rgba(202,222,221,.035),0 0 0 140px rgba(202,222,221,.025); pointer-events:none;}
.contact-panel h2 {font-size:clamp(27px,3vw,37px); margin:13px 0 12px; color:#fff;}
.contact-panel p {margin:0; color:#d0dce0; max-width:58ch;}
.contact-panel .eyebrow {color:#c0d9df;}
.contact-panel .btn {position:relative; z-index:1; background:#f5e4c9; color:#143146; white-space:nowrap; flex:none;}
.contact-panel .btn:hover {background:#fff;}
/* Rechtliches */
.legal {padding-block:66px 100px; max-width:900px;}
.legal h1 {font-size:clamp(37px,5vw,56px); margin-bottom:24px;}
.legal h2 {font-size:26px; line-height:1.3; margin:39px 0 14px;}
.legal p,.legal li {color:#344c59; font-size:16px; line-height:1.82;}
.legal ul {padding-left:24px;}
.legal .legal-date {color:#74818a; font-size:14px; margin-bottom:35px;}
.legal address {font-style:normal; color:#344c59; line-height:1.9;}
.legal-card {background:#fffdf8; border:1px solid #e4ddd1; box-shadow:0 4px 26px rgba(16,40,60,.04); border-radius:22px; padding:30px 38px;}
.legal a {overflow-wrap:anywhere;}
/* Footer */
.footer {background:#112b3e; color:#d4e0e5; margin-top:80px;}
body:has(.story-wrap) .footer {margin-top:0;}
.footer-main {display:flex; align-items:center; justify-content:space-between; gap:35px; padding-block:37px;}
.footer .brand {color:#fff;}
.footer .brand:hover {color:#fff;}
.footer .brand-name span {color:#84c2d2;}
.footer .brand-tag {color:#a2bac4;}
.footer .brand-icon {width:46px; height:46px;}
.footer small {display:block; margin-top:10px; font-size:12px; color:#a8c0ca;}
.footer-links {display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.footer-links a {color:#d4e0e5; text-decoration:none; font-size:14px; font-weight:600;}
.footer-links a:hover {color:#fff; text-decoration:underline;}
.footer-bottom {border-top:1px solid #355164; text-align:center; padding:14px 24px 18px; font-size:12px; color:#9eb7c0;}
@media(max-width:1020px) {
  .header-inner {gap:14px;}
  .nav {gap:15px;}
  .hero {gap:36px;}
  .story {gap:35px;}
}
@media(max-width:790px) {
  .header-inner {align-items:flex-start; flex-direction:column; padding-block:15px 13px; gap:10px;}
  .nav {width:100%; overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; gap:22px; padding-bottom:2px;}
  .nav a {font-size:13px;}
  .nav .nav-contact {padding:5px 12px;}
  .brand-icon {width:44px; height:44px;}
  .brand-name {font-size:24px;}
  .hero {grid-template-columns:1fr; padding-block:45px 70px; gap:29px;}
  .hero-text .lead {max-width:68ch;}
  h1 {font-size:clamp(41px,7.6vw,63px);}
  .grid-three {grid-template-columns:1fr; gap:16px;}
  .card {padding:25px 27px;}
  .card-number {margin-bottom:12px;}
  .story {grid-template-columns:1fr; padding-block:65px; gap:38px;}
  .contact-panel {align-items:flex-start; flex-direction:column; padding:36px 30px;}
  .footer-main {align-items:flex-start; flex-direction:column;}
}
@media(max-width:480px) {
  .container {width:min(var(--max), calc(100% - 32px));}
  .hero-image,.story-image {padding:5px; border-radius:18px; transform:none;}
  .hero-image img,.story-image img {border-radius:14px;}
  .hero-image figcaption {font-size:10px;}
  .section {padding-block:60px;}
  h1 {font-size:43px;}
  .legal {padding-block:44px 70px;}
  .legal-card {padding:24px 20px;}
  .footer-links {gap:16px;}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto;} .btn,.nav a{transition:none;} .btn:hover{transform:none;}}