/* ==========================================================================
   Deine Designs · Björn Fellinger
   Webdesign & Website-Wartung
   ========================================================================== */

/* ---------- Schriften: lokal eingebunden, keine Verbindung zu Google ---------- */
@font-face {
  font-family: "Permanent Marker";
  src: url("../fonts/permanent-marker-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --ink: #161412;
  --ink-2: #211e1b;
  --cream: #faf5e9;
  --cream-2: #f1e9d7;
  --paper: #fffdf8;

  /* Türkis – passend zum Foto */
  --accent: #5fd4d4;       /* auf dunklem Grund */
  --accent-mid: #1fa7a7;   /* Deko auf hellem Grund */
  --accent-deep: #0a6f6f;  /* Text & Links auf hellem Grund */

  --muted-dark: #c8c0af;
  --muted-light: #5b544a;

  --font-display: "Permanent Marker", "Segoe Print", "Bradley Hand", cursive;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 84px;
  --section-y: clamp(88px, 10vw, 144px);
  --edge-h: clamp(22px, 3.4vw, 52px);
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-card: 18px 26px 16px 30px / 28px 16px 30px 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Handgemachte Formen (SVG als Maske) */
  --edge-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64L0 44L6.6 44.5L15.7 43.2L22.8 43.6L33.1 46.9L44.8 44.4L54 48.1L62.7 43.6L69.3 42.6L79.5 43.9L91.2 42.8L102.7 42.1L110 41.4L120.8 39.6L132 40.5L137.8 38.5L146.9 42.1L156.6 37.9L166.9 42.5L177.6 38.1L182.5 39.3L188.5 36.4L201.4 36.6L212.1 41.5L220.9 35L226.4 35L231 36.1L243.7 35.1L247.7 36L252.7 36.6L260 35.3L268.3 38.3L279.2 35.5L286.5 36.9L296.6 35.2L301.9 34.9L311 36.8L316.5 37.1L322.6 35.8L331.7 36.3L343.5 35.7L355 34.8L365.7 34.6L370.3 36.1L375.4 33.8L386.3 33.2L396.5 35.1L401.4 33.2L411.6 34.1L418.8 32L430.7 32.4L437.4 31.5L445.5 32.7L456.8 33.1L468.8 30.8L478.5 31.6L490.9 33.1L501.1 32.2L507.3 32.1L517.9 33.2L527.1 33.1L540.1 33.1L548.8 33L557.2 34.7L562 34.4L571.5 35.5L580.2 33.9L586.7 33.5L592.4 35.3L602 34.5L610.6 34.5L619.1 35.8L624.9 33.7L633.4 33.6L643.9 34L653.7 33.1L662.6 33.7L668.3 33.1L680.9 31.8L685.2 30.7L693.5 34.8L702.7 31.8L709.6 32.2L716.4 29.5L728.9 30.3L741.8 30.8L751.8 25L757.5 30.6L763.5 32.5L772.3 32.4L782 32L794 32.7L805.1 31.4L811.3 31.1L818.5 31.5L825.5 33.1L834.8 32.1L847.5 30.6L856.1 31.1L861.8 31.5L874 32.1L879 29.7L885.3 30.7L896 29.9L903.3 30.5L914.2 29.1L926.9 27.6L937.8 31.8L949 26.1L956 25.1L967.8 19.8L978.7 24.4L984 26L993.6 24.5L1002.2 24.2L1014.3 25.5L1020.5 25.1L1031.8 25.3L1038.5 24.8L1047.4 23.3L1055.2 25.6L1060 23.7L1070.4 25.3L1074.8 25.6L1080.6 23.9L1084.9 23.2L1095.4 23.8L1101.5 24.6L1113.7 24.2L1125.5 21.7L1138.4 23.2L1145.4 22.8L1151.5 20.6L1158.7 20.9L1164.5 21.2L1176.6 20.4L1183.8 19L1195 17.4L1201.7 17.9L1213.2 16.4L1223.5 17.1L1229 15.7L1235.8 16.5L1241 15.9L1252.6 15.3L1257.2 15.7L1268.7 15.1L1281.3 15.2L1294.1 15L1302.4 15.3L1307.1 14.7L1317.3 16.6L1325.9 16.8L1334.7 16L1339.6 17.1L1345.1 15.7L1349.3 16.8L1357.8 17.1L1369.3 16L1382.1 14.2L1387.6 15.8L1400.6 17.7L1405.1 13.9L1411.7 14.7L1420 13.1L1430.2 13.8L1435.4 14L1440 12.9L1440 64ZM396.5 28.5l2.7 -0.9l-1.2 2.4zM571.5 28.2l8.5 -0.6l-3.8 1.8zM751.8 20.3l4.9 -0.5l-2.2 1.4zM856.1 22.1l6.2 -0.6l-2.8 1.7zM937.8 19.3l3.5 -0.7l-1.6 2zM1080.6 17l2.5 -0.5l-1.1 1.4zM1235.8 3.7l4.1 -0.7l-1.8 1.9zM1268.7 10.6l8 -0.6l-3.6 1.7z'/%3E%3C/svg%3E");
  --edge-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64L0 15L8.3 13.7L13.8 13.9L20.9 14.2L26.6 13.8L35 15.4L41.5 14.7L52.5 14.9L61.8 16L72.2 14.5L77.5 16.3L90.1 16.5L100.4 19.6L110.5 17.4L121.1 17.2L130.3 17.1L137.3 18.2L141.7 18.4L149.7 20L160.6 20.2L167.6 19.4L178.5 20.2L187.6 21.8L196.6 20.3L206.5 21.5L210.7 21.7L216 23L220.7 20.9L232.7 22.8L244.2 18.1L249.5 22.2L254.1 21.2L265.8 23.3L274.4 21.2L282.9 23.5L295 23.3L300.6 21.5L308.3 22.7L320.6 22.5L331.5 23L336.9 27.4L349.6 25.2L355.2 24.6L359.5 24.5L366.9 15.8L379.4 25.8L392.2 25.9L396.8 26.1L403.8 27.2L408.6 27L421 22.3L433.1 30.1L440.5 28.4L452 29.7L459.8 31L467.3 28.8L471.5 23.5L478.1 31.2L485.7 30.5L492.9 28.7L499.5 30.3L509.5 29.6L518.9 30L531 29.4L537.3 30.2L547.4 30.1L556.5 28.9L568.4 27.9L575.5 28.1L584.9 28.8L593.8 28.9L600.6 30.4L612 29.8L618.6 29.7L629.6 32.9L636.3 32L646.6 30.2L650.6 32.1L658.9 31.5L668.1 31.3L677.3 31.1L689 31.9L699 27.4L705.3 32.5L716.6 33.9L722.2 32.4L727.9 32.2L735.9 27.8L744.7 32.3L755.9 31.4L764.1 30.9L769.8 31.5L780.3 31.4L790.8 31.6L797.9 31L805.2 29.6L811.2 30.6L815.3 22.7L827.5 30.5L835.3 31.2L843.2 30.5L847.7 31.2L853.3 28.9L859.4 29.5L867.8 30.9L874.1 30L886.6 30L894.1 29.9L898.7 30.7L908.2 31.8L912.4 32.9L924.4 31.6L932.6 31.7L940.8 33.3L945.5 32.6L954.7 33.1L962.6 32.5L973.4 32.6L985.4 33.7L991.1 33.5L996.4 33.3L1002.5 28.1L1008.4 35.1L1016.4 32.1L1024.4 33.6L1034.8 33.2L1044 31.4L1048.9 31.5L1053.4 32.9L1065.4 31L1074 31.8L1080.5 31.5L1091.5 30.8L1100.6 32.8L1110.5 31.3L1118.5 33.8L1130 32.9L1138.2 32.8L1143.5 34.7L1151.1 35.2L1162.2 32.7L1174.2 35L1183.5 36.9L1189.8 36.1L1198.5 29.2L1205.4 35.5L1218.3 40.8L1226.6 38.8L1231.5 37.1L1237.1 38.4L1244.9 43L1255.3 38.6L1260.8 37.7L1265.9 31.9L1271.8 37.7L1276.8 39.4L1284 38.8L1295.4 38L1303.5 38.4L1312 37.6L1323.3 38.3L1334.8 36.6L1347.2 38.8L1359.1 39.8L1367.8 39.7L1380.2 40.3L1384.8 41.4L1397.3 42.4L1409.9 43.2L1419.6 42.3L1424.9 42.3L1436.2 45.4L1440 44.5L1440 64ZM265.8 16.1l2.8 -0.8l-1.3 2.3zM629.6 17.7l7 -0.7l-3.1 1.9zM677.3 19l7.8 -0.7l-3.5 2z'/%3E%3C/svg%3E");
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M8 7.4L12.8 8.5L22.3 6.6L29.5 6.5L35.1 10.4L39.2 15.5L43.9 13.7L52.4 6.8L57 9.1L60.8 6.1L65.9 6.5L75.8 6.7L80.2 9.2L83.9 9.9L90.7 11.2L98.2 9.5L108 7L112.3 7.1L118.7 7.7L126.6 11.6L130.2 13.1L138 8L142.2 15.7L147.8 6.4L152.5 10L160.4 9.1L163.8 8.1L173.2 6.5L181 7.4L184.7 14.1L193 7.4L196.6 9.4L205.9 12.3L213.1 9.3L219.3 7L222.4 10L232.2 12.6L237 6.2L246.8 7.2L252.8 9.7L257.8 8.4L267.1 9.4L276 6.1L281.1 9.9L285.5 6.4L289.1 7.8L295.3 6.4L299.1 6.5L306.6 12.8L310.8 8.4L318.4 7.3L325.1 8.3L330.5 8.3L334.6 6.8L338.1 6.2L341.5 9.8L350.7 9.4L360.4 9.2L364.7 7.9L369.5 9.9L376.3 9.4L381.5 7.3L388.1 8.3L390.9 8L393.2 12.6L390.8 19L392.8 25.2L391.4 35.5L392.5 40.2L391.6 48.9L391 59.2L392.3 70.5L392.7 77.2L392.1 85.3L390.7 91.2L393 100.5L393.1 109.6L390.7 121L392.9 129.2L391.3 140.2L390.7 148.3L391.2 155L391.3 165.5L393.2 171.7L392.7 184.5L392 195.1L392 208.1L393.2 217.9L393 227.8L391.6 235.7L392.1 246.5L390.7 251.3L393 256.5L393 267.4L391.6 276.1L392.9 281.4L392.6 293.4L392.7 300.3L388.8 311.6L391.5 321.6L393 328.2L391.9 336.5L392.7 348.6L392.2 358L392.3 364L392.3 369.1L390.8 377.7L392.3 386.5L392.6 394.5L391.2 401L391.3 407.9L392.2 419.7L392.9 432.1L393.2 439.6L391.1 444.9L392.1 456.9L392.5 466.7L391.1 473.7L392.7 477.9L390.8 483.7L392 492.5L387.2 491.1L377.8 487.5L373.5 493.1L369.7 490.3L363.9 491.9L357.1 490.8L349.7 485.7L346.1 491L337.3 491.8L328.7 493.1L323.4 493.4L314.4 491.7L310 490.3L303.6 492.6L300.4 490.7L294.8 493.3L288.4 492.1L278.4 490.2L273.4 491.1L266.9 490.9L260.7 493.9L252.8 493L246.2 492.4L239.3 494L233.5 490.2L225.9 487L219.6 492.5L214.4 491L209 493.3L202 490.7L194.2 493.4L191 492.7L185.7 485.9L181.2 491.7L174.4 492.7L171.4 493.2L166.9 492.3L158.6 491.4L151 494L145.1 493L141.8 490L136.7 493L133.6 492.9L125.6 492.6L118.4 491.6L112.6 492.8L104.4 493.2L94.8 493.8L88.7 490.4L80.8 490.1L72.4 490.1L69.2 490.7L61.3 490.9L55.2 491.6L48.7 491L39 492.4L34 490.5L24.3 491.6L18.2 493.5L13.4 491.2L9.2 492L8.2 479.1L8.5 472.5L7.5 463.8L9 452.6L7.8 441L6.9 428.7L8.4 417.1L6.9 410.4L7.3 403.1L7.2 396.7L8.3 389.4L6.7 382.5L7.5 371.8L8.3 360.6L7.1 355.4L8.3 346.1L7.6 335.5L8.3 323L8.5 316.7L9.1 311.4L7.4 306.4L7.8 301.1L8.1 289L7.2 281.8L11.3 276.1L9.1 270.7L8.4 259.6L8.9 250.8L6.8 243L7.6 238.4L7.8 229L7.6 218.9L8.5 205.9L9.5 195.7L7.8 190.3L7.4 181.1L8.2 172.4L8.8 167.2L7.4 156.8L7.2 152.6L6.9 144.5L7.7 135.2L8.5 128.1L7.3 122.6L8.2 117.7L12 112.3L9.3 104.2L8.1 92.9L7.5 86.5L9.3 76.9L12.1 66.7L7 54.3L8.5 49.8L8 40.7L10.1 33.7L8.2 27.2L7.7 17.4Z'/%3E%3C/svg%3E");
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10C40 6.5 95 4 158 2.5c1.5.1 1.4 1.7-.2 2C100 7.5 52 10.5 5 13.5 1.8 13.7.4 10.6 2 10z'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.9 1.4 3.6 3 5 4.9C11.6 12.6 15.4 8.4 20.5 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M45 8.5C24.5 5.8 7.6 19.4 7.2 39.2 6.8 58.6 21.6 73.4 40.6 73.2 59.8 73 73.6 58.2 72.8 39.4 72 21.2 57.4 7.8 36 9.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23161412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: .7em 1.1em;
  font-weight: 700;
  color: var(--ink);
  background: var(--accent);
  border-radius: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Abschnitte & Farbwelten ---------- */
.section {
  position: relative;
  z-index: 0;
  padding-block: var(--section-y);
  color: var(--fg);
  background: var(--bg);
}

.s-dark {
  --bg: var(--ink);
  --fg: var(--cream);
  --muted: var(--muted-dark);
  --hl: var(--accent);
  --hl-text: var(--accent);
  --card: var(--ink-2);
  --card-line: rgba(250, 245, 233, .11);
  --shadow-hard: rgba(250, 245, 233, .16);
}

.s-cream,
.s-cream-2 {
  --bg: var(--cream);
  --fg: var(--ink);
  --muted: var(--muted-light);
  --hl: var(--accent-mid);
  --hl-text: var(--accent-deep);
  --card: var(--paper);
  --card-line: rgba(22, 20, 18, .11);
  --shadow-hard: var(--ink);
}

.s-cream-2 {
  --bg: var(--cream-2);
}

/* Gerissene Pinselkante zwischen den Abschnitten */
.edge::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: var(--edge-h);
  background: var(--bg);
  -webkit-mask: var(--edge-a) center bottom / 100% 100% no-repeat;
  mask: var(--edge-a) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.edge--b::before {
  -webkit-mask-image: var(--edge-b);
  mask-image: var(--edge-b);
}

.edge--flip::before {
  transform: scaleX(-1);
}

/* ---------- Typografie ---------- */
.h-display {
  font-family: var(--font-display);
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: .005em;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.45rem, 1.55rem + 3.3vw, 4.4rem);
}

.h2 {
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.3rem);
}

.h3 {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: clamp(1.25rem, 1.12rem + .45vw, 1.5rem);
  line-height: 1.2;
}

.title-underline::after {
  content: "";
  display: block;
  width: clamp(92px, 10vw, 140px);
  height: 12px;
  margin-top: .42em;
  background: var(--hl);
  -webkit-mask: var(--swoosh) left center / 100% 100% no-repeat;
  mask: var(--swoosh) left center / 100% 100% no-repeat;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.1rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hl-text);
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 8px;
  background: currentColor;
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
}

.lead {
  max-width: 60ch;
  font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem);
  color: var(--muted);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.section-head .lead {
  margin-top: 1.4rem;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg, var(--cream));
  --btn-border: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: .8em 1.5em;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--sketch);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s;
}

.btn:hover {
  transform: translateY(-2px) rotate(-1deg);
}

.btn:active {
  transform: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --btn-border: var(--accent);
  box-shadow: 4px 4px 0 var(--shadow-hard);
}

.btn--primary:hover {
  box-shadow: 6px 6px 0 var(--shadow-hard);
}

.btn--ghost:hover {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-border: var(--fg);
}

.btn--sm {
  min-height: 44px;
  padding: .55em 1.15em;
  font-size: .98rem;
}

.btn--block {
  width: 100%;
}

/* ---------- Icons ---------- */
.icon {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
}

.icon-wrap::before {
  content: "";
  position: absolute;
  inset: 12px -2px 0 14px;
  background: var(--hl);
  opacity: .3;
  border-radius: 47% 53% 41% 59% / 56% 44% 56% 44%;
}

.icon-wrap .icon {
  position: relative;
}

/* ---------- Header ---------- */
.site-header {
  --fg: var(--cream);
  --bg: var(--ink);
  --shadow-hard: rgba(250, 245, 233, .16);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--cream);
}

/* Hintergrund als Pseudo-Element, damit das mobile Menü am Viewport hängt */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 20, 18, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(250, 245, 233, .08);
  opacity: 0;
  transition: opacity .3s;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height .3s var(--ease);
}

.is-scrolled .header-inner {
  height: 68px;
}

.logo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.logo-swoosh {
  width: 100%;
  height: 9px;
  margin-top: 5px;
  color: var(--accent);
  fill: currentColor;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}

.nav-link {
  position: relative;
  padding-block: .35em;
  font-weight: 600;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 7px;
  background: var(--accent);
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
}

/* Sprachumschalter DE | EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid rgba(250, 245, 233, .3);
  border-radius: 999px;
}

.lang-option {
  min-width: 36px;
  padding: .38em .6em;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}

.lang-option:hover {
  background: rgba(250, 245, 233, .14);
}

.lang-option[aria-current="true"] {
  color: var(--ink);
  background: var(--accent);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--header-h) + clamp(36px, 6vw, 84px));
  padding-bottom: clamp(120px, 13vw, 180px);
  overflow: hidden;
}

/* Hintergrundbild: Skizzen mit dem Schriftzug "web design", abgedunkelt hinter dem Inhalt */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Bild so hoch wie der Startbereich; der Schriftzug beginnt kurz nach dem linken Textrand */
.hero::before {
  top: 0;
  left: calc(max(var(--gutter), (100% - var(--container)) / 2) + 90px);
  height: 100%;
  aspect-ratio: 740 / 514;
  background: url("../img/hintergrund-webdesign.jpg") center / cover no-repeat;
  background-image: image-set(url("../img/hintergrund-webdesign.avif") type("image/avif"), url("../img/hintergrund-webdesign.jpg") type("image/jpeg"));
  translate: -31% 0;
  -webkit-mask-image: linear-gradient(90deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 68%, transparent 100%);
}

/* Abdunklung, damit alle Texte gut lesbar bleiben */
.hero::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 20, 18, .82) 0%, rgba(22, 20, 18, .78) 20%, rgba(22, 20, 18, .78) 55%, rgba(22, 20, 18, .72) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.hero-title > span {
  display: block;
}

.hero-title .hl {
  position: relative;
  font-style: normal;
  color: var(--accent);
  white-space: nowrap;
}

.hero-title .hl::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -.1em;
  left: -2%;
  height: .2em;
  background: var(--accent);
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
}

.hero-lead {
  margin-top: 1.6rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 2.2rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6em 1.6em;
  margin-top: 2rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

.hero-trust li::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  background: var(--accent);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.hero-visual {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 440px);
}

.hero-scribble {
  position: absolute;
  top: -12%;
  left: -24%;
  z-index: -1;
  width: 146%;
  max-width: none;
  height: 124%;
  color: var(--accent);
  overflow: visible;
}

.scribble-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.9s var(--ease) .3s forwards;
}

.hero-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  rotate: 2.2deg;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .45));
}

.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  -webkit-mask: var(--torn) center / 100% 100% no-repeat;
  mask: var(--torn) center / 100% 100% no-repeat;
}

.status-card {
  position: absolute;
  bottom: 7%;
  left: -20%;
  z-index: 2;
  width: min(250px, 74%);
  padding: 16px 18px 14px;
  color: var(--ink);
  background: var(--cream);
  border-radius: var(--sketch-card);
  box-shadow: 6px 6px 0 var(--accent);
  rotate: -3deg;
}

.status-title {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .6em;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #2bb673;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(43, 182, 115, .2);
  animation: pulse 2.4s ease-in-out infinite;
}

.status-card li {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .26em 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  animation: rise .6s var(--ease) both;
}

.status-card li:nth-child(1) { animation-delay: 1.3s; }
.status-card li:nth-child(2) { animation-delay: 1.65s; }
.status-card li:nth-child(3) { animation-delay: 2s; }

.status-card li svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent-deep);
}

/* Einstiegsanimation im Hero */
.hero-content > * {
  animation: rise .9s var(--ease) both;
}

.hero-content > :nth-child(2) { animation-delay: .08s; }
.hero-content > :nth-child(3) { animation-delay: .16s; }
.hero-content > :nth-child(4) { animation-delay: .24s; }
.hero-content > :nth-child(5) { animation-delay: .32s; }

.hero-photo,
.status-card {
  animation: pop .9s var(--ease) both;
}

.hero-photo { animation-delay: .15s; }
.status-card { animation-delay: 1.05s; }

/* ---------- Was dich erwartet ---------- */
.intro-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(52px, 7vw, 88px);
}

.intro-text .lead {
  color: var(--fg);
}

.intro-text p:not(.lead) {
  color: var(--muted);
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
}

.feature h3 {
  margin: 1.1rem 0 .55rem;
}

.feature p {
  font-size: .98rem;
  color: var(--muted);
}

/* ---------- Leistungen ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--sketch-card);
}

.service-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.service-top .icon {
  width: 54px;
  height: 54px;
  color: var(--accent);
}

.service-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(250, 245, 233, .35);
}

.service-card .h3 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
}

.service-card > p {
  margin: .9rem 0 1.6rem;
  color: var(--muted);
}

.checklist {
  display: grid;
  gap: .65em;
  margin-bottom: 2rem;
}

.checklist li {
  position: relative;
  padding-left: 1.9em;
}

.checklist li::before {
  content: "";
  position: absolute;
  top: .22em;
  left: 0;
  width: 1.25em;
  height: 1.25em;
  background: var(--hl);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.service-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Wartungspakete ---------- */
.packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 32px);
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: var(--card);
  border: 1.5px solid var(--card-line);
  border-radius: var(--sketch-card);
  box-shadow: 6px 6px 0 rgba(22, 20, 18, .07);
}

.package--featured {
  --bg: var(--ink);
  --fg: var(--cream);
  --muted: var(--muted-dark);
  --hl: var(--accent);
  --hl-text: var(--accent);
  --card-line: rgba(250, 245, 233, .12);
  --shadow-hard: rgba(250, 245, 233, .2);
  color: var(--fg);
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--accent-mid);
  translate: 0 -14px;
  rotate: -.6deg;
}

.package-badge {
  position: absolute;
  top: -17px;
  right: 22px;
  padding: .35em .95em;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
  background: var(--accent);
  border-radius: var(--sketch);
  rotate: 4deg;
}

.package-name {
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
}

.package-desc {
  min-height: 3.3em;
  margin: .5rem 0 1.2rem;
  color: var(--muted);
}

.package-price {
  align-self: flex-start;
  margin-bottom: 1.6rem;
  padding: .3em .85em;
  font-size: .92rem;
  font-weight: 800;
  color: var(--hl-text);
  border: 1.5px dashed currentColor;
  border-radius: 999px;
}

.package .checklist {
  flex: 1;
}

.package .btn {
  align-self: stretch;
}

.packages-note {
  max-width: 780px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- Ablauf ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.steps::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 10%;
  left: 36px;
  height: 2px;
  background-image: linear-gradient(90deg, rgba(250, 245, 233, .35) 55%, transparent 0);
  background-size: 14px 2px;
}

.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
  background: var(--bg);
  border-radius: 50%;
}

.step-num::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: var(--accent);
  -webkit-mask: var(--ring) center / 100% 100% no-repeat;
  mask: var(--ring) center / 100% 100% no-repeat;
}

.step:nth-child(even) .step-num::before {
  transform: rotate(140deg);
}

.step .h3 {
  margin-bottom: .6rem;
}

.step p {
  font-size: .98rem;
  color: var(--muted);
}

/* ---------- Über mich ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.about-portrait {
  position: relative;
  width: clamp(150px, 16vw, 196px);
  aspect-ratio: 1;
  margin-bottom: 1.8rem;
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.about-portrait::after {
  content: "";
  position: absolute;
  inset: -10px;
  background: var(--hl);
  -webkit-mask: var(--ring) center / 100% 100% no-repeat;
  mask: var(--ring) center / 100% 100% no-repeat;
  rotate: -24deg;
}

.about-text .lead {
  margin-top: 1.4rem;
  color: var(--fg);
}

.about-text p:not(.lead) {
  color: var(--muted);
}

/* Firmenname im Fließtext – im Stil des Logos */
.brand-name {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.1em;
  font-synthesis: none;
  line-height: 1;
  white-space: nowrap;
}

.brand-name::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.1em;
  left: 0;
  height: .32em;
  background: var(--hl);
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
}

.signature {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--hl-text);
  rotate: -5deg;
  transform-origin: left;
}

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.value {
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--card);
  border: 1.5px solid var(--card-line);
  border-radius: var(--sketch-card);
  box-shadow: 5px 5px 0 rgba(22, 20, 18, .06);
}

.value:nth-child(even) {
  translate: 0 28px;
}

.value .h3 {
  margin: .9rem 0 .45rem;
  font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem);
}

.value p {
  font-size: .97rem;
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}

.faq-head {
  position: sticky;
  top: calc(68px + 32px);
}

.faq-head p {
  margin-top: 1.4rem;
  color: var(--muted);
}

.faq-head a {
  font-weight: 700;
  color: var(--hl-text);
}

.faq-list {
  border-top: 1.5px solid var(--card-line);
}

.faq-item {
  border-bottom: 1.5px solid var(--card-line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.35rem 0;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--hl-text);
}

.faq-icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1.5px solid currentColor;
  border-radius: var(--sketch);
  transition: background-color .25s, border-color .25s;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 3.6rem 1.5rem 0;
  color: var(--muted);
}

/* ---------- Kontakt ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

.contact-intro .lead {
  margin-top: 1.4rem;
}

.contact-direct {
  margin-top: 2.2rem;
}

.contact-label {
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height: 1.25;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-mail:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: .9rem;
  padding: .45em 1em;
  font-size: .9rem;
  font-weight: 700;
  color: var(--fg);
  background: transparent;
  border: 1.5px solid var(--card-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.contact-steps {
  display: grid;
  gap: .85rem;
  margin-top: 2.6rem;
  counter-reset: contact;
}

.contact-steps li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  color: var(--muted);
}

.contact-steps li::before {
  counter-increment: contact;
  content: counter(contact);
  flex: none;
  width: 1.3em;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--accent);
}

.contact-form {
  --bg: var(--cream);
  --fg: var(--ink);
  --muted: var(--muted-light);
  --hl: var(--accent-mid);
  --hl-text: var(--accent-deep);
  --shadow-hard: var(--ink);
  padding: clamp(24px, 3.4vw, 44px);
  color: var(--ink);
  background: var(--cream);
  border-radius: var(--sketch-card);
  box-shadow: 10px 10px 0 var(--accent);
}

.form-title {
  margin-bottom: 1.3rem;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem);
}

.field {
  display: grid;
  gap: .4rem;
  margin-bottom: 1.1rem;
}

.field label {
  font-size: .95rem;
  font-weight: 800;
}

.field label span {
  font-weight: 500;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8em .95em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid rgba(22, 20, 18, .28);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field select {
  padding-right: 2.6em;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right .9em center;
  background-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-deep);
  outline: none;
  box-shadow: 0 0 0 4px rgba(31, 167, 167, .25);
}

.field ::placeholder {
  color: #8a8276;
}

.form-note {
  margin-top: 1rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}

.form-status {
  margin-top: .7rem;
  font-weight: 700;
  color: var(--accent-deep);
}

.form-status:empty {
  display: none;
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: clamp(72px, 8vw, 104px) 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.footer-brand p {
  max-width: 36ch;
  margin-top: 1.1rem;
  color: var(--muted);
}

.footer-title {
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.site-footer ul {
  display: grid;
  gap: .45rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--hl-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-mail {
  white-space: nowrap;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 22px;
  font-size: .9rem;
  color: var(--muted);
  border-top: 1.5px solid var(--card-line);
}

.footer-bottom p {
  margin: 0;
}

/* ---------- Rechtliche Seiten ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(76px, 8vw, 112px);
}

.legal {
  max-width: 800px;
}

.legal h2 {
  margin: 2.6rem 0 .8rem;
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
  font-weight: 800;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin: 1.6rem 0 .5rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.legal p,
.legal li {
  color: #3d3831;
}

.legal ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
  list-style: disc;
}

.legal li {
  margin-bottom: .3em;
}

.legal a {
  color: var(--accent-deep);
  overflow-wrap: anywhere;
}

.ph {
  padding: 0 .3em;
  background: rgba(95, 212, 212, .35);
  border-bottom: 2px dashed var(--accent-deep);
  border-radius: 4px;
}

.draft-note {
  margin-bottom: 2.6rem;
  padding: 1.1rem 1.3rem;
  font-size: .95rem;
  background: rgba(95, 212, 212, .14);
  border: 2px dashed var(--accent-deep);
  border-radius: 12px;
}

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Animationen ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
}

@keyframes draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  6% {
    opacity: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(43, 182, 115, 0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-text {
    max-width: 680px;
  }

  .steps {
    grid-template-columns: 1fr;
    max-width: 680px;
    gap: 34px;
  }

  .steps::before {
    top: 36px;
    bottom: 36px;
    left: 35px;
    right: auto;
    width: 2px;
    height: auto;
    background-image: linear-gradient(180deg, rgba(250, 245, 233, .35) 55%, transparent 0);
    background-size: 2px 14px;
  }

  .step {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 26px;
  }

  .step-num {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .step .h3 {
    align-self: end;
    margin-top: .7rem;
  }

}

@media (max-width: 960px) {
  .hero-grid,
  .intro-head,
  .about,
  .faq,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    width: min(74vw, 400px);
    margin-top: 28px;
  }

  .status-card {
    left: -9%;
  }

  .faq-head {
    position: static;
  }

  .services {
    grid-template-columns: minmax(0, 1fr);
  }

  .packages {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
    gap: 34px;
  }

  .package--featured {
    translate: none;
    rotate: none;
  }

  .package-desc {
    min-height: 0;
  }
}

@media (max-width: 940px) {
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    padding: 0;
    color: var(--cream);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 26px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s var(--ease), background-color .2s, width .3s var(--ease);
  }

  .nav-toggle-bars {
    position: relative;
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle-bars::before {
    top: -8px;
  }

  .nav-toggle-bars::after {
    top: 8px;
    width: 18px;
  }

  .nav-open .nav-toggle-bars {
    background: transparent;
  }

  .nav-open .nav-toggle-bars::before {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-open .nav-toggle-bars::after {
    width: 26px;
    transform: translateY(-8px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 16px) var(--gutter) 48px;
    overflow-y: auto;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }

  .nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .nav-link {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    font-weight: 400;
  }

  .nav-lang {
    margin-top: 24px;
  }

  .lang-option {
    min-width: 52px;
    padding: .6em .9em;
    font-size: .95rem;
  }

  .nav-cta-item {
    margin-top: 18px;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ---------- Tablet ---------- */

/* Tablet quer: volle Navigation, etwas kompakter */
@media (min-width: 941px) and (max-width: 1180px) {
  .header-inner {
    gap: 16px;
  }

  .nav-list {
    gap: 14px;
  }

  .nav-link {
    font-size: .95rem;
  }

  .nav-cta-item .btn {
    padding-inline: .9em;
    font-size: .92rem;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .hero-title {
    font-size: clamp(2.6rem, 1rem + 3vw, 3.6rem);
  }
}

/* Tablet hochkant: Text und Foto nebeneinander, Leistungen zweispaltig */
@media (min-width: 700px) and (max-width: 960px) {
  .hero {
    padding-top: calc(var(--header-h) + 44px);
  }

  /* Schriftzug bündig mit dem Text, damit er nicht unter das Foto rutscht */
  .hero::before {
    left: calc(var(--gutter) - 24px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 28px;
  }

  .hero-title {
    font-size: clamp(2.2rem, 1rem + 2.5vw, 2.9rem);
  }

  .hero-visual {
    width: 100%;
    margin-top: 0;
  }

  .status-card {
    bottom: -8%;
    left: -16%;
    width: 88%;
    padding: 12px 14px 10px;
  }

  .status-card li {
    font-size: .84rem;
  }

  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .service-card .h3 {
    font-size: 1.5rem;
  }
}

/* Tablet: Wartungspakete als breite Karten mit Liste rechts */
@media (min-width: 601px) and (max-width: 960px) {
  .packages {
    max-width: none;
  }

  .package {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
  }

  .package-name,
  .package-desc,
  .package-price,
  .package .btn {
    grid-column: 1;
  }

  .package-price {
    justify-self: start;
    margin-bottom: 1.3rem;
  }

  .package .checklist {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-bottom: 0;
  }

  .package .btn {
    align-self: end;
    justify-self: start;
  }
}

/* Touch-Geräte: größere Klickflächen */
@media (pointer: coarse) {
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-link::after {
    bottom: 6px;
  }

  .lang-option {
    padding: .62em .75em;
  }

  .copy-btn {
    padding: .65em 1.1em;
  }
}

/* Handy: Hintergrundbild auf Breite skaliert, Schriftzug mittig hinter der Überschrift */
@media (max-width: 699px) {
  .hero::before {
    left: 50%;
    width: 210%;
    height: auto;
    translate: -49.3% 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(22, 20, 18, .8) 0%, rgba(22, 20, 18, .79) 50%, rgba(22, 20, 18, .76) 100%);
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .features,
  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .value:nth-child(even) {
    translate: none;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-visual {
    width: min(80vw, 360px);
  }

  .status-card {
    bottom: -9%;
    left: -5%;
    width: 72%;
    padding: 12px 14px 10px;
  }

  .status-card li {
    font-size: .86rem;
  }

  .faq-answer {
    padding-right: 0;
  }

  p,
  li {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}