:root{
  --bg: #f6fbfc;
  --text: #0f172a;
  --muted: #475569;

  --teal: #5ea8a7;
  --gold: #f1c24b;

  --border: rgba(15,23,42,.08);
  --shadow: 0 18px 45px rgba(2,6,23,.10);
  --shadow2: 0 10px 28px rgba(2,6,23,.08);
  --radius: 18px;
}

/* Reset */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);

  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(94,168,167,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(241,194,75,.15), transparent 60%),
    var(--bg);
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}


/* Layout */

.container{
  max-width:1120px;
  margin:auto;
  padding:18px 16px 60px;
}


/* Topbar */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:14px 20px;

  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);

  border:1px solid var(--border);
  border-radius:22px;

  box-shadow:0 8px 20px rgba(0,0,0,.06);
}


.brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.brand img{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;

  background:transparent;
  box-shadow:none;
  border:none;
}

.brand .title{
  font-weight:800;
  font-size:22px;
  color:#334155;
}


/* Navigation */

.navlinks{
  display:flex;
  gap:18px;
  font-weight:600;
  font-size:18px;
  color:#475569;
}

.navlinks a{
  padding:6px 12px;
  border-radius:999px;
}

.navlinks a:hover{
  background:rgba(94,168,167,.12);
}


/* HERO */

.hero{
  margin-top:20px;
  border-radius:26px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;

  background:linear-gradient(180deg,#ffffff,#f3fbfb);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(1100px 700px at 65% 35%, rgba(94,168,167,.30), transparent 60%),
    radial-gradient(950px 650px at 35% 60%, rgba(241,194,75,.18), transparent 62%),
    radial-gradient(900px 500px at 50% 50%, rgba(180,215,230,.32), transparent 60%);

  pointer-events:none;
}

.hero-inner{
  position:relative;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;

  padding:26px;
}


/* Left */

.left{
  background:transparent;
}


.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 16px;

  border-radius:999px;

  background:rgba(94,168,167,.25);
  border:1px solid rgba(94,168,167,.25);

  font-weight:700;
  color:#355f5d;
}


h1{
  margin:20px 0 12px;

  font-size:clamp(34px,4vw,54px);
  line-height:1.05;
  letter-spacing:-0.8px;

  color:#334155;
}


.lead{
  font-size:16.5px;
  color:#475569;
  max-width:70ch;

  text-align: justify;        /* Blocksatz */
  text-justify: inter-word;  /* saubere Wortabstände */
  hyphens: auto;             /* Silbentrennung */

  margin: 0 0 14px
}


/* Badges */

.badges{
  margin-top:20px;

  display:flex;
  flex-wrap:wrap;
  gap:12px;
}


.badge{
  display:flex;
  align-items:center;
  gap:8px;

  padding:11px 16px;

  border-radius:999px;

  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.08);

  font-weight:600;
  color:#334155;

  box-shadow:0 6px 14px rgba(0,0,0,.05);
}

.badge.teal{
  background:rgba(94,168,167,.22);
}

.badge.gold{
  background:rgba(241,194,75,.25);
}


/* Right */

.right{
  display:flex;
  flex-direction:column;
  gap:16px;

  background:transparent;
}


/* Illustration */

.illustration{
  /* sehr heller, luftiger Himmel-Hintergrund */
  background: rgba(94,168,167, 0.06);  /* vorher: 0.12 */

  border-radius:22px;
  border:1px solid rgba(15,23,42,.04);
  box-shadow:0 12px 26px rgba(2,6,23,.08);

  padding: 10px;
  overflow:hidden;
}

.illustration img{
  width:100%;
  display:block;
}


/* Contact */

.contact{
  background:rgba(255,255,255,.55);
  border-radius:22px;
  border:1px solid rgba(15,23,42,.05);
  box-shadow:0 12px 26px rgba(2,6,23,.08);
  padding:18px;
}

.contact h3{
  font-size:22px;
  margin-bottom:10px;
  color:#334155;
}


/* Contact rows */

.crow{
  display:flex;
  gap:12px;
  align-items:center;

  padding:10px 14px;

  border-radius:999px;

  margin-bottom:10px;

  background:rgba(94,168,167,.18);
}

.crow.alt{
  background:rgba(255,255,255,.7);
}

.crow.gold{
  background:rgba(241,194,75,.22);
}


.cico{
  width:34px;
  height:34px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:white;
  border:1px solid rgba(15,23,42,.08);
}


.crow b{
  display:block;
  font-size:14px;
}

.crow a,
.crow span{
  font-weight:600;
  color:#334155;
}


/* Buttons */

.actions{
  margin-top:6px;

  display:flex;
  flex-direction:column;
  gap:10px;
}


.btn{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  padding:12px;

  border-radius:14px;

  border:1px solid rgba(15,23,42,.1);

  background:rgba(94,168,167,.25);

  font-weight:700;
  color:#334155;

  box-shadow:0 6px 12px rgba(0,0,0,.05);
}

.btn.secondary{
  background:rgba(255,255,255,.75);
}

.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}


/* Footer */

.footer{
  margin-top:18px;
  padding:14px 8px;

  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;

  font-size:14px;
  color:#475569;
}


/* =====================================
   IMPRESSUM + DATENSCHUTZ: FORMATIERUNG
===================================== */

/* Listen sauber bündig */
main.impressum ul,
main.datenschutz ul{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 14px;
}

main.impressum li,
main.datenschutz li{
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
}

main.impressum li::before,
main.datenschutz li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  line-height: 1.2;
  color: #0f172a;
}


/* Überschriften / Titel mit Abstand */
main.impressum h1,
main.impressum h2,
main.impressum h3,
main.impressum strong,
main.datenschutz h1,
main.datenschutz h2,
main.datenschutz h3,
main.datenschutz strong{
  display: block;
  margin-top: 20px;     /* Abstand nach oben */
  margin-bottom: 6px;   /* Abstand nach unten */
}


/* Absätze luftiger */
main.impressum p,
main.datenschutz p{
  margin-bottom: 10px;
}



/* Responsive */

@media(max-width:900px){

  .hero-inner{
    grid-template-columns:1fr;
  }

  .brand .title{
    font-size:16px;
  }

}