/* HERO ===================================================================*/
.hero {
  padding: 168px 0 120px;
  margin-top: -72px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(720px circle at 85% 15%, rgba(3, 149, 255, 0.18), transparent 70%),
    radial-gradient(520px circle at 5% 95%, rgba(3, 149, 255, 0.12), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero-inner {
  display: block;
}
.hero-eyebrow {
  height: 36px;
  margin-bottom: 0;
}
.hero-title {
  font-size: clamp(40px, 5.8vw, 88px);
  margin: 0 0 32px;
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.04;
  max-width: 22ch;
}
.hero-title .accent-em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* Rotating headline - static prefix + typewriter word */
.hero-tw-line {
  display: block;
  line-height: 1.04;
}
.tw {
  display: inline;
}
.tw-text {
  white-space: pre;
}
.tw-text::after {
  /* Zero-width space keeps the line-box baseline stable when text is empty */
  content: "\200B";
}
/* Schreibmarke.
   Höhe und Lage sind an der Schrift gemessen: Großbuchstaben reichen
   0.726em über die Grundlinie, Unterlängen 0.162em darunter. Der Strich
   deckt beides ab und steht dadurch auf gleicher Höhe wie das Wort,
   statt wie vorher an der Oberkante der Großbuchstaben zu enden. */
.tw-caret {
  display: inline-block;
  width: 0.055em;
  height: 0.92em;
  margin-left: 0.08em;
  border-radius: 0.03em;
  background: currentColor;
  vertical-align: -0.17em;
  /* Beim Tippen und Löschen steht der Strich - er blinkt nur, wenn das Wort
     fertig dasteht. Ein mitblinkender Strich beim Tippen wirkt unruhig. */
  opacity: 1;
}
.tw-caret.is-idle {
  animation: tw-blink .68s ease-in-out infinite alternate;
}
@keyframes tw-blink {
  from { opacity: 1; }
  to   { opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-caret { animation: none; opacity: 1; }
}
.hero-title-sub {
  display: block;
  color: var(--muted);
  font-size: 0.24em;
  font-weight: 500;
  margin-top: 24px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 34ch;
}
.hero-meta-bar {
  margin-top: 80px;
  padding-top: 28px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 12px;
}
.hero-side-item .eyebrow { margin-bottom: 8px; }
.hero-side-item p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-soft);
  line-height: 1.55;
  max-width: 32ch;
  text-wrap: pretty;
}

.hero-meta-bar {
  padding: 20px 0 4px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-meta-item .v {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero-meta-item .k {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .hero-meta-bar { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ABOUT ==================================================================*/
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
/* Rasterelemente haben min-width:auto und schrumpfen deshalb nicht unter die
   Mindestbreite ihres Inhalts - das sprengt bei schmalen Bildschirmen still
   das Layout. Hier für alle Raster der Seite abgeschaltet. */
.about-grid > *,
.footer-top > *,
.values > *,
.services-list > *,
.contact-grid > * { min-width: 0; }
/* Markenfläche im Über-uns-Abschnitt.
   Kein Kasten: das Logo steht frei auf dem Seitenhintergrund, dahinter nur
   ein weicher blauer Schein - dieselbe Sprache wie der Schimmer im Hero.
   Dadurch wirkt es wie eingesetzt und nicht wie ein Bildplatzhalter. */
.about-brand {
  margin: 0;
  position: relative;
  aspect-ratio: 4/3;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
/* inset MUSS 0 bleiben: mit negativem Wert ragt die Fläche über die Figur
   hinaus, und da hier - anders als bei den großen Abschnitten - nichts
   abschneidet, konnte man die Seite auf dem Handy seitlich verschieben.
   Die weiche Kante macht ohnehin der Weichzeichner, der wirkt sich nicht
   auf die Seitenbreite aus. */
.about-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 50% 48%, rgba(3, 149, 255, 0.34), transparent 70%),
    radial-gradient(34% 30% at 68% 70%, rgba(3, 149, 255, 0.18), transparent 72%);
  filter: blur(50px);
  pointer-events: none;
}
.about-brand-logo {
  position: relative;
  z-index: 1;
  width: 86%;
  max-width: 480px;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(3, 60, 110, 0.18));
  animation: about-float 7.5s ease-in-out infinite;
}
/* Langsames Schweben - gerade so viel, dass es lebt, ohne abzulenken. */
@keyframes about-float {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-brand-logo { animation: none; }
}
/* Das Logo liegt schwarz vor - im dunklen Modus braucht es Weiß. */
[data-theme="dark"] .about-brand-logo {
  filter: invert(1) brightness(1.08) drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}
.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 8px;
}
.about-copy .prose {
  font-size: 17.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Values grid */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.value { display: flex; flex-direction: column; gap: 10px; }
.value-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.value-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .values { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; padding-top: 40px; }
}

/* SERVICES ==============================================*/
.services {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: "";
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(640px circle at 95% 30%, rgba(3, 149, 255, 0.16), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}
.services > .container { position: relative; z-index: 1; }
.services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-row {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 28px 28px;
  text-align: left;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.service-num {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.service-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.service-tagline {
  color: var(--fg-soft);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
.service-keys {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-keys li {
  font-size: 12px;
  background: var(--bg-alt);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--fg-soft);
  border: 1px solid var(--line);
}

@media (max-width: 1020px) {
  .services-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .services-list { grid-template-columns: 1fr; }
  .service-row { min-height: auto; }
}

/* PROCESS ================================================================*/
.process {
  background: var(--fg);
  color: #fff;
  position: relative;
  overflow: hidden;}
/* Subtle grid pattern */
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 85%);
  pointer-events: none;
}
/* Soft blue glow */
.process::after {
  content: "";
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(620px circle at 18% 30%, rgba(3, 149, 255, 0.16), transparent 70%),
    radial-gradient(680px circle at 82% 75%, rgba(3, 149, 255, 0.12), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}
/* Lift the content above the grid pattern and the glow */
.process .container {
  position: relative;
  z-index: 1;
}
.process .sec-head h2,
.process h3 { color: #fff; }
.process .dim { color: rgba(255,255,255,0.45); }
.process .sec-head .col-r p { color: rgba(255,255,255,0.6); }
.process .sec-sub { color: rgba(255,255,255,0.6); }
.process .eyebrow {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.process-step {
  padding: 36px 28px 32px;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.process-step:last-child { border-right: 0; }
.process-step:last-child { border-right: 0; }
.process-num {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(255,255,255,0.12);
  padding: 5px 11px;
  border-radius: 999px;
  width: fit-content;
}
.process-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.process-lead {
  margin: 0;
  font-size: 15.5px;
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.process-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  text-wrap: pretty;
}

@media (max-width: 1020px) {
  .process-list { grid-template-columns: 1fr 1fr; }
  .process-step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .process-step:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .process-step:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .process-list { grid-template-columns: 1fr; }
  .process-step { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
  .process-step:nth-child(odd) { border-right: 0 !important; }
  .process-step:last-child { border-bottom: 0 !important; }
}

/* TEAM ===================================================================*/
/* Flexbox statt Grid: nur so lässt sich eine unvollständige letzte Zeile
   zentrieren. Bei neun Personen stünde die neunte Karte sonst allein links.
   Volle Zeilen sehen unverändert aus - die Breiten sind so gerechnet, dass
   vier Karten plus Abstände exakt die Zeile füllen.
   Die Kartenbreite gehört zu --team-gap; beides immer zusammen ändern. */
.team-grid {
  --team-gap: 24px;
  --team-cols: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.team-card {
  width: calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-photo {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.team-card:hover .team-photo img {
  transform: scale(1.04);
}
.team-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-name {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg);
}
.team-role {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 1020px) {
  .team-grid { --team-cols: 3; }
}
@media (max-width: 720px) {
  .team-grid { --team-cols: 2; }
}

/* CONTACT ================================================================*/
.contact-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: "";
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(680px circle at 10% 20%, rgba(3, 149, 255, 0.16), transparent 70%),
    radial-gradient(560px circle at 95% 90%, rgba(3, 149, 255, 0.10), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}
.contact-section > .container { position: relative; z-index: 1; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card .eyebrow { margin-bottom: 4px; }
.contact-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-card-row .contact-card { padding: 18px 18px; gap: 6px; }
.contact-address {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg);
}
.link {
  font-size: 14.5px;
  color: var(--fg);
  transition: color .2s ease;
  width: fit-content;
}
.link:hover { color: var(--accent); }

.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  aspect-ratio: 4/3;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(0.96);
  transition: filter .3s ease;
}
.contact-map:hover iframe { filter: grayscale(0) contrast(1); }

/* Leaflet OSM map fills the contact-map container */
.osm-map {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: var(--bg-alt);
}
/* Fläche vor dem Laden der Karte - siehe map-osm.jsx: die Kacheln kommen von
   fremden Servern und werden erst nach einem Klick angefordert. */
.osm-consent {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  color: var(--fg-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  font: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.osm-consent:hover { border-color: var(--fg); background: var(--bg); }
.osm-consent-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.osm-consent-text {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 42ch;
}
.osm-consent-address {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 4px;
}

/* Brighten tiles so streets and labels are clearly readable in both modes */
.osm-map .leaflet-tile-pane {
  filter: contrast(1.02) saturate(0.95);
}
[data-theme="dark"] .osm-map .leaflet-tile-pane {
  filter: brightness(1.55) contrast(0.95) saturate(0.85);
}
.osm-map .leaflet-control-attribution {
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--fg);
  padding: 2px 6px;
  border-radius: 6px 0 0 0;
}
.osm-map .leaflet-control-attribution a { color: var(--accent); }
.osm-map .leaflet-bar a {
  background-color: var(--bg);
  color: var(--fg);
  border-color: var(--line);
}
.osm-map .leaflet-bar a:hover { background-color: var(--bg-alt); }

[data-theme="dark"] .osm-map .leaflet-control-attribution {
  background: rgba(20, 20, 20, 0.78);
  color: var(--fg);
}
[data-theme="dark"] .osm-map .leaflet-bar a {
  background-color: var(--bg-alt);
  color: var(--fg);
  border-color: var(--line);
}
.contact-map-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* Maps consent placeholder */
.maps-consent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  gap: 14px;
  background: var(--bg);
}
.maps-consent-icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.maps-consent h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.maps-consent p {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-soft);
  line-height: 1.55;
  max-width: 42ch;
}
.maps-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.maps-consent .btn {
  margin-top: 6px;
  background: var(--accent);
  border-color: var(--accent);
}
.maps-consent .btn:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-card-row { grid-template-columns: 1fr; }
}

/* CONTACT FORM ============================================================*/
.cf {
  background: var(--paper);
  padding: 32px 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cf-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.cf-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field.wide { grid-column: 1 / -1; }
.cf-label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.cf-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
}
.cf-counter {
  font-size: 11px;
  color: var(--muted-2);
}
.cf-field input,
.cf-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--fg);
  resize: vertical;
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--muted-2); }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.cf-field.is-error input,
.cf-field.is-error textarea {
  border-color: var(--accent);
}
.cf-error-msg {
  font-size: 12px;
  color: var(--accent);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.chip {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-soft);
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { color: var(--fg); border-color: var(--muted-2); }
.chip.is-on {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}

.cf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-soft);
  line-height: 1.5;
  cursor: pointer;
}
.cf-check input {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--muted-2);
  background: var(--bg);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
}
.cf-check input:checked {
  background: var(--fg);
  border-color: var(--fg);
}
.cf-check input:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-size: 11px;
}
.cf-check.is-error input { border-color: var(--accent); }
.cf-check a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

.cf { position: relative; }
.cf-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.cf-foot {
  font-size: 12px;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.45;
  text-align: right;
}
.cf-foot a { color: var(--fg-soft); text-decoration: underline; }
.cf-foot a:hover { color: var(--accent); }

/* Sicherheitscode */
.cf-captcha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cf-captcha-image {
  width: 200px;
  height: 69px;                 /* Seitenverhältnis des Bildes (260x90) */
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fdf6e3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-captcha-image img { width: 100%; height: 100%; display: block; }
.cf-captcha-missing { font-size: 12px; color: #8a7f68; }

.cf-captcha-reload {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.cf-captcha-reload:hover:not(:disabled) { border-color: var(--fg); color: var(--fg); }
.cf-captcha-reload:disabled { opacity: .5; cursor: default; }

/* Der eingetippte Code wird groß und gesperrt dargestellt - der Platzhalter
   darf das nicht erben, sonst steht dort "CODE EINTIPPEN" in Großbuchstaben
   und sieht neben den anderen Feldern wie ein Fremdkörper aus. */
.cf-field .cf-captcha-input {
  flex: 1 1 180px;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}
.cf-field .cf-captcha-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--sans);
}

@media (max-width: 560px) {
  .cf-captcha-image { width: 100%; height: auto; aspect-ratio: 260 / 90; }
  .cf-captcha-input { flex-basis: 100%; }
}

/* Honigtopf gegen Bots: aus dem Blickfeld, aber nicht display:none -
   manche Bots überspringen versteckte Felder gezielt. Statt weit nach links
   zu schieben (was je nach Layout die Seite verbreitern kann) wird das Feld
   auf einen Punkt zusammengezogen und abgeschnitten. */
.cf-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Der Versand hat nicht geklappt - mit Telefonnummer als Ausweg. */
.cf-send-error {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 59, 48, 0.35);
  background: rgba(255, 59, 48, 0.07);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.cf-send-error strong { font-weight: 600; }
.cf-send-error span   { color: var(--fg-soft); }
.cf-send-error a      { color: var(--accent); }

.cf-success {
  background: var(--paper);
  padding: 40px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cf-success h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.cf-success p { margin: 0; color: var(--fg-soft); max-width: 50ch; }

@media (max-width: 720px) {
  .cf { padding: 22px 18px; }
  .cf-grid { grid-template-columns: 1fr; }
}

/* FOOTER ==================================================================*/
.footer {
  background: #ededec;
  color: var(--fg);
  padding: 72px 0 28px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.footer > .container { position: relative; z-index: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
/* justify-self: start lässt die Spalte auf die Breite des Firmennamens
   schrumpfen, statt sich über die ganze Rasterspalte zu ziehen - der Block
   bleibt dadurch am linken Rand. align-items: center zentriert darin das
   Logo über dem Schriftzug. */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: start;
}
.footer-brand-col img {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
}
.footer-brand-col p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}
.footer-col-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col li button,
.footer-col li a {
  background: none; border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: color .2s ease;
  letter-spacing: 0;
}
.footer-col li {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg);
  letter-spacing: 0;
}
.footer-col li button:hover,
.footer-col li a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-links { display: flex; gap: 18px; }
.footer-links a,
.footer-links .footer-link-btn { transition: color .2s ease; }
.footer-links a:hover,
.footer-links .footer-link-btn:hover { color: var(--fg); }
.footer-link-btn {
  background: none; border: 0; padding: 0;
  font-family: var(--sans); font-size: 12.5px;
  color: var(--muted); cursor: pointer;
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* DETAIL pages ============================================================*/
.detail {
  padding: 48px 0 100px;
  min-height: 80vh;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-soft);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 10px;
  margin-bottom: 40px;
  margin-left: -10px;
  border-radius: var(--radius);
  transition: color .15s ease, background .15s ease;
}
.back-link:hover { color: var(--fg); background: var(--bg-alt); }

.prose {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  max-width: 60ch;
  text-wrap: pretty;
}
.prose + .prose { margin-top: 14px; }

/* Profil-Slug in der Adresse existiert nicht (mehr) oder Daten laden noch */
.detail-missing {
  padding: 72px 0 96px;
  max-width: 46ch;
}
.detail-missing h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.detail-missing .btn { margin-top: 22px; }

/* TEAM DETAIL ============================================================*/
.team-detail .td-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  padding-bottom: 56px;
}
.td-photo {
  margin: 0;
  position: relative;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.td-photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: 50% 6%;
}
.td-body { padding-top: 4px; display: flex; flex-direction: column; gap: 16px; }
.td-name {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.td-role {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.td-tag {
  font-size: 12.5px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--fg-soft);
}
.td-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}
.td-contact-row { display: flex; flex-direction: column; gap: 6px; }
.td-contact-row .eyebrow { margin-bottom: 0; }
.td-actions { margin-top: 8px; }

@media (max-width: 860px) {
  .team-detail .td-grid { grid-template-columns: 1fr; gap: 28px; }
  .td-contact { grid-template-columns: 1fr; gap: 14px; }
}

/* LEGAL pages ============================================================*/

/* LEGAL prose layout (standalone subpages) ==============================*/
/* Breiter als die früheren 820px, aber weiterhin schmaler als der Rest der
   Seite (1280px): Rechtstexte sind lange Fließtextblöcke, und über etwa
   1000px findet das Auge den Anfang der nächsten Zeile nicht mehr sicher. */
.legal-prose .container {
  max-width: 1080px;
}
.legal-prose .back-link {
  margin-bottom: 32px;
}
.legal-article-head {
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.legal-article-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.legal-article-head h1 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.legal-article {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg);
}
/* <section> bringt global 110px Innenabstand mit - gedacht für die großen
   Abschnitte der Startseite. Die Textblöcke der Rechtsseiten sind aber auch
   <section>-Elemente und rissen dadurch riesige Löcher zwischen die Absätze.
   Hier zählt allein der Abstand zwischen den Blöcken. */
.legal-block { padding: 0; }

.legal-article > .legal-block:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.legal-block + .legal-block {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.legal-block > h2 {
  margin: 0 0 24px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  scroll-margin-top: 80px;
}
.legal-block > h3 {
  margin: 32px 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.legal-block > h3:first-child,
.legal-block > h2 + h3 {
  margin-top: 0;
}
.legal-article p {
  margin: 0 0 16px;
  max-width: 92ch;
  text-wrap: pretty;
  color: var(--fg);
}
.legal-article p:last-child { margin-bottom: 0; }
.legal-article a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.legal-article a:hover {
  color: var(--accent, var(--fg));
  text-decoration-color: currentColor;
}
.legal-article strong {
  font-weight: 600;
  color: var(--fg);
}
/* Inhaltsverzeichnis - schlichte Liste, zwei Spalten wenn Platz ist. */
.legal-toc {
  list-style: none;
  padding-left: 0;
  columns: 2;
  column-gap: 48px;
}
.legal-toc li {
  break-inside: avoid;
  margin-bottom: 0;
  padding: 4px 0;
}
.legal-toc a {
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal-toc a:hover { color: var(--fg); border-bottom-color: var(--line); }
@media (max-width: 640px) { .legal-toc { columns: 1; } }

/* Zusammenfassungs-Kästen (im Original Tabellen mit Rahmen) */
.legal-summary {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.6;
}
.legal-summary strong:first-child {
  display: block;
  margin-bottom: 10px;
  font-size: 14.5px;
}
.legal-summary p {
  margin: 0 0 6px;
  max-width: none;
  color: var(--fg-soft);
}
.legal-summary p:last-child { margin-bottom: 0; }

/* Wörtliche DSGVO-Zitate */
.legal-article blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line);
  color: var(--fg-soft);
}
.legal-article blockquote p { margin: 0 0 10px; }
.legal-article blockquote p:last-child { margin-bottom: 0; }

/* Listen */
.legal-article ul,
.legal-article ol {
  margin: 0 0 16px;
  padding-left: 22px;
  max-width: 88ch;
}
.legal-article li { margin-bottom: 8px; line-height: 1.6; }
.legal-article li:last-child { margin-bottom: 0; }
.legal-article li > ul,
.legal-article li > ol { margin-top: 8px; }

/* Global gilt img { display: block } - ein Symbol mitten im Satz muss das
   für sich zurücknehmen, sonst reißt es die Zeile auseinander. */
.legal-inline-icon {
  display: inline-block;
  width: 15px;
  height: auto;
  vertical-align: -2px;
  margin: 0 1px;
}
.legal-figure {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

@media (max-width: 640px) {
  .legal-toc { columns: 1; }
}

.legal-article .legal-source {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--fg-soft);
}

@media (max-width: 760px) {
  .legal-prose .container { padding-left: 20px; padding-right: 20px; }
  .legal-block + .legal-block { margin-top: 36px; padding-top: 36px; }
  .legal-article-head { padding-bottom: 28px; margin-bottom: 28px; }
  .legal-article p { font-size: 15px; }
}

/* LEGAL top glow ========================================================*/
.legal-prose {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.legal-prose::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -180px;
  width: 780px;
  height: 900px;
  background:
    radial-gradient(45% 55% at 70% 25%,
      color-mix(in oklch, var(--accent) 18%, transparent) 0%,
      color-mix(in oklch, var(--accent) 6%, transparent) 45%,
      transparent 75%);
  filter: blur(50px);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 760px) {
  .legal-prose::before { width: 520px; height: 700px; top: -80px; right: -140px; opacity: 0.55; }
}

/* LEGAL parts (combined Impressum & Datenschutz) =========================*/
.legal-parts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Zusatzelemente in den Rechtstexten */
.legal-dl {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 8px 24px;
  margin: 4px 0 0;
  padding: 0;
}
.legal-dl-row {
  display: contents;
}
.legal-dl dt {
  font-size: 13.5px;
  color: var(--fg-soft);
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.legal-dl dd {
  margin: 0;
  padding: 6px 0;
  font-size: 15px;
  color: var(--fg);
  border-top: 1px solid var(--line);
}
.legal-dl-row:first-child dt,
.legal-dl-row:first-child dd {
  border-top: 0;
  padding-top: 0;
}

.legal-list,
.legal-numbered {
  margin: 4px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg);
}
.legal-list li::marker { color: var(--fg-soft); }
.legal-numbered li::marker { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.legal-numbered li strong { font-weight: 600; }

.legal-outro {
  margin-top: 4px !important;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-left: 2px solid var(--fg-soft);
  font-size: 14.5px;
  color: var(--fg-soft);
  border-radius: 4px;
}

@media (max-width: 860px) {
  .legal-dl { grid-template-columns: 1fr; gap: 0; }
  .legal-dl dt { padding-bottom: 0; border-bottom: 0; }
  .legal-dl dd { padding-top: 2px; border-top: 0; padding-bottom: 10px; }
  .legal-dl-row + .legal-dl-row dt { border-top: 1px solid var(--line); padding-top: 10px; }
  .legal-toc { gap: 6px; }
}

/* ============================================================
   Dark mode component overrides
   ============================================================ */

/* Process section was deliberately dark on light pages (bg: var(--fg)).
   In dark mode --fg flips light, which would blow out the section.
   Keep it slightly elevated from the page bg instead. */
[data-theme="dark"] .process {
  background: #181818;
  color: #f5f5f4;
}

/* The maps-consent overlay uses the page background; bg-alt + line vars
   already carry through. Only the explicit white inside the eyebrow chip
   on the map needs a tweak. */
[data-theme="dark"] .map-eyebrow {
  background: rgba(20, 20, 20, 0.85);
  color: #f5f5f4;
}

/* Form fields adopt the bg-alt token, so they invert correctly.
   The focus ring colour is already var(--accent). */

/* Footer borders/cards adopt --line which is dark in dark mode */

/* Hero glow uses rgba(blue) over white; reduce its base intensity slightly
   in dark mode so it doesn't bloom on the darker background. */
[data-theme="dark"] .hero::before {
  background:
    radial-gradient(720px circle at 85% 15%, rgba(3, 149, 255, 0.15), transparent 70%),
    radial-gradient(520px circle at 5% 95%, rgba(3, 149, 255, 0.09), transparent 70%);
}

/* Legal page glow */
[data-theme="dark"] .legal-prose::before {
  opacity: 0.5;
}

/* Contact form */
[data-theme="dark"] .cf-field input,
[data-theme="dark"] .cf-field textarea,
[data-theme="dark"] .cf-field select {
  background: var(--bg-alt);
  color: var(--fg);
  border-color: var(--line);
}
[data-theme="dark"] .cf-field input::placeholder,
[data-theme="dark"] .cf-field textarea::placeholder {
  color: var(--muted);
}

/* Footer was hardcoded to #ededec (light). Flip to a dark surface. */
[data-theme="dark"] .footer {
  background: #111111;
  border-top-color: var(--line);
}
[data-theme="dark"] .footer::before {
  background: none;
}

/* "Unser Team" pill on the about photo - hardcoded white in light mode */

/* Service rows: use the elevated --bg-alt surface so they don't look flat
   against the dark page background */
[data-theme="dark"] .service-row {
  background: var(--bg-alt);
  border-color: var(--line);
}

/* Contact cards / form: use the elevated --bg-alt surface so they
   read as cards on the dark page background */
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-map,
[data-theme="dark"] .maps-consent,
[data-theme="dark"] .cf {
  background: var(--bg-alt);
}

/* Maps consent icon: light bg circle with white icon = invisible in dark.
   Flip to dark circle with light icon. */
[data-theme="dark"] .maps-consent-icon {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
}