:root{
  --marine:#0A355E; --muted:#66768C; --anth:#1E1E1E; --bg:#FFFFFF;
  --radius:14px; --shadow:0 8px 24px rgba(10,53,94,.12);
  --font: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);color:#243041;background:var(--bg)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-weight:800}
.btn--primary{background:var(--marine);color:#fff;box-shadow:var(--shadow)}
.btn--secondary{border:1px solid rgba(10,53,94,.15);color:var(--marine)}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(10,53,94,.08)}
.header__bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.header__brand{display:flex;align-items:center;gap:10px}
.header__nav{display:flex;gap:10px;align-items:center}
.header__link{color:var(--muted);font-weight:700;padding:10px 12px;border-radius:10px}
.header__link:hover{color:var(--marine);background:rgba(10,53,94,.06)}
.header__cta{background:var(--marine);color:#fff}
.header__burger{display:none;border:1px solid rgba(10,53,94,.15);padding:8px 10px;border-radius:10px;background:#fff}
.drawer{display:none;position:fixed;inset:72px 0 0 auto;width:84%;max-width:360px;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.14);border-left:1px solid rgba(10,53,94,.08);padding:16px;z-index:60}
.drawer a{display:block;padding:12px;border-radius:10px;color:var(--marine)}
.drawer a:hover{background:rgba(10,53,94,.06)}
.drawer.is-open{display:block}
.hero{position:relative;isolation:isolate;background:linear-gradient(180deg,#f7fbff 0%, #eaf3ff 100%)}
.hero__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;padding:4px 0 24px}
.hero--simple .hero__inner{grid-template-columns:1fr 1fr;align-items:center}
.hero__photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
h1{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin:0 0 14px;color:var(--marine)}
.section__title{font-size:28px;color:var(--marine);margin:0 0 10px}
.section__sub{color:var(--muted);margin:0 0 28px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.card{border:1px solid rgba(10,53,94,.08);border-radius:var(--radius);padding:22px;background:#fff;box-shadow:var(--shadow)}
.footer{background:var(--anth);color:#fff;padding:40px 0;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.footer__small{color:#c9d4e3;font-size:14px}
.footer__legal{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:18px;color:#9fb2cc}
@media (max-width: 992px){
  .hero__inner{grid-template-columns:1fr}
  .header__nav{display:none}
  .header__burger{display:inline-flex}
  .footer__grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .footer__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
.slider {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.miles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.miles-table th,
.miles-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(10,53,94,.15);
  text-align: left;
}

.miles-table thead th {
  background: var(--marine);
  color: #fff;
  font-weight: 700;
}

.miles-table tbody tr:nth-child(even) {
  background: #f7fbff;
}

/* Responsiv */
.card {
  overflow-x: auto;
}

.card::-webkit-scrollbar {
  height: 8px;
}

.card::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
}
@media (max-width: 992px){
  section .container {
    grid-template-columns: 1fr !important;
  }
  section .container .hero__photo {
    margin-top: 24px;
  }
}

/* Über-mich: Grid + fixes Bildverhalten */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:start;
}

/* Bild soll NICHT skalieren */
.about-photo{
  justify-self:end;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:#fff;
}
.about-photo__img{
  width:420px;           /* feste Breite */
  height:auto;           /* proportional */
  max-width:none;        /* kein Shrink auf kleineren Screens */
  display:block;
  border-radius:var(--radius);
}

/* Tabelle über volle Breite unterhalb */
.about-table{
  grid-column:1 / -1;
}

/* Tabellenfarbschema + Responsivität (wie zuvor) */
.miles-table{ width:100%; border-collapse:collapse; font-size:14px }
.miles-table th, .miles-table td{ padding:10px; border-bottom:1px solid rgba(10,53,94,.15); text-align:left }
.miles-table thead th{ background:var(--marine); color:#fff; font-weight:700 }
.miles-table tbody tr:nth-child(even){ background:#f7fbff }
.table-scroll{ overflow-x:auto }
.table-scroll::-webkit-scrollbar{ height:8px }
.table-scroll::-webkit-scrollbar-thumb{ background:var(--muted); border-radius:4px }

/* Smartphone: einspaltig, Bild zwischen Text und Tabelle
   – Bild bleibt fix 420px breit, Container wird horizontal scrollbar */
@media (max-width: 992px){
  .about-grid{ grid-template-columns:1fr }
  .about-photo{
    justify-self:center;
    overflow-x:auto;     /* nur der Bildcontainer scrollt bei Zu-klein */
  }
}

#datenschutz .card + .card { margin-top: 16px; }
#datenschutz h3 { color: var(--marine); margin-top: 0; }

.external-link {
  color: var(--marine);
  font-weight: 700;
  text-decoration: underline;
}
.external-link::after {
  content: " ↗";
  font-size: 0.9em;
}
/* externe Links hervorheben */
.external-link {
  color: var(--marine);
  font-weight: 700;
  text-decoration: underline;
}
.external-link::after {
  content: " ↗";
  font-size: 0.9em;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.align-start {
  align-items: start;
}
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.slider {
  position: relative;
  width: 80%;
  height: 280px; /* Höhe wie bei den Cards, kannst du anpassen */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}


.section-header {
  text-align: center;
  margin-bottom: 32px;
}

.intro {
  font-size: 18px;
  font-weight: 500;
  color: var(--marine);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.feature-list li {
  margin-bottom: 8px;
  padding-left: 1.4em;
  position: relative;
}
.feature-list li::before {
  content: "⛵";
  position: absolute;
  left: 0;
  color: var(--marine);
}

.badge-list {
  list-style: none;
  padding: 0;
}
.badge-list li {
  display: inline-block;
  background: #f0f6fb;
  color: var(--marine);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius);
  margin: 4px;
}

.cta-box {
  margin-top: 36px;
  padding: 20px;
  text-align: center;
  border: 2px solid var(--marine);
  border-radius: var(--radius);
  background: #f9fcff;
  box-shadow: var(--shadow);
}
.cta-box h4 {
  margin: 0;
  color: var(--marine);
}
.intro {
  font-size: 18px;
  font-weight: 500;
  color: var(--marine);
  margin-bottom: 20px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.feature-list li {
  margin-bottom: 10px;
  padding-left: 1.6em;
  position: relative;
}
.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--marine);
  font-weight: bold;
}

.profile-photo {
  text-align: center;
}
.profile-photo img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Modernisierung des About-Textblocks */
.about-intro .intro{
  font-size: 18px;
  font-weight: 500;
  color: var(--marine);
  margin: 6px 0 14px;
  line-height: 1.5;
}

.about-keypoints{
  list-style: none;
  padding: 0;
  margin: 14px 0 16px;
}
.about-keypoints li{
  position: relative;
  padding-left: 1.6em;
  margin: 8px 0;
  line-height: 1.5;
}
.about-keypoints li::before{
  content: "⛵";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--marine);
  font-weight: 700;
}

.about-credentials{
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 6px;
}