:root {
  --paper-bg: #f7f4ed;
  --paper-card: #fcfaf5;
  --paper-grid: rgba(27, 54, 93, 0.045);
  --ink-navy: #1b365d;
  --ink-slate: #2d3748;
  --stamp-red: #c84b31;
  --blueprint-blue: #2b6cb0;
  --tape-bg: rgba(230, 222, 202, 0.8);
  --highlighter: rgba(254, 240, 138, 0.85);
  
  --font-main: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'Courier Prime', monospace;
  --font-hand: 'Caveat', cursive;
}

html {
  font-size: 18px; /* Clean scale for 100% desktop view */
}

body {
  background-color: var(--paper-bg);
  color: var(--ink-slate);
  font-family: var(--font-main);
  background-image: 
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  overflow-x: hidden;
  position: relative;
}

/* ULTRA-SUBTLE SANDPAPER / FINE NOISE TEXTURE OVERLAY */
.sandpaper-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.038;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
}

/* Paper Box & Card Micro-Interactions */
.paper-box {
  background-color: var(--paper-card);
  border: 2px solid var(--ink-navy);
  box-shadow: 4px 4px 0px var(--ink-navy);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.paper-box:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0px var(--ink-navy);
}

.paper-box-sm {
  background-color: var(--paper-card);
  border: 1.5px solid var(--ink-navy);
  box-shadow: 2.5px 2.5px 0px var(--ink-navy);
  transition: all 0.15s ease;
}

/* Inked Stamps */
.stamp-red {
  border: 2px dashed var(--stamp-red);
  color: var(--stamp-red);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-1.5deg);
  border-radius: 2px;
  background: rgba(200, 75, 49, 0.04);
}

.stamp-blue {
  border: 2px solid var(--blueprint-blue);
  color: var(--blueprint-blue);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(1.2deg);
  border-radius: 2px;
  background: rgba(43, 108, 176, 0.04);
}

/* Adhesive Tape Elements */
.tape {
  position: absolute;
  height: 22px;
  width: 80px;
  background: var(--tape-bg);
  border: 1px solid rgba(180, 170, 140, 0.4);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  z-index: 10;
  pointer-events: none;
}
.tape-top-left { top: -11px; left: 16px; transform: rotate(-3.5deg); }
.tape-top-right { top: -11px; right: 16px; transform: rotate(3deg); }

.hl {
  background: linear-gradient(100deg, var(--highlighter) 0%, var(--highlighter) 100%);
  padding: 1px 8px;
  border-radius: 2px;
  display: inline;
}

.handwriting {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  color: var(--blueprint-blue);
  line-height: 1.15;
}

/* Tactile Buttons */
.btn-paper-primary {
  background-color: var(--ink-navy);
  color: #fcfaf5;
  font-family: var(--font-main);
  font-weight: 600;
  border: 2px solid var(--ink-navy);
  box-shadow: 3.5px 3.5px 0px var(--stamp-red);
  padding: 0.75rem 1.5rem;
  border-radius: 3px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.btn-paper-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--stamp-red);
  background-color: #0d1f38;
}

.btn-paper-primary:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--stamp-red);
}

.btn-paper-secondary {
  background-color: #fcfaf5;
  color: var(--ink-navy);
  font-family: var(--font-mono);
  font-weight: 700;
  border: 2px solid var(--ink-navy);
  box-shadow: 3.5px 3.5px 0px var(--ink-navy);
  padding: 0.7rem 1.35rem;
  border-radius: 3px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.btn-paper-secondary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ink-navy);
  background-color: #f2ebd9;
}

.btn-paper-secondary:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--ink-navy);
}

/* Page Curtain Overlay Animation */
#page-curtain {
  position: fixed;
  inset: 0;
  background-color: #1b365d;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}

#page-curtain.active {
  transform: translateY(0%);
  pointer-events: auto;
}

/* Fade In Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ HEADER: gerissenes Papier, leicht körnig ═══ */
.torn-header{
  position:sticky;top:0;z-index:40;
  background-color:#f7f4ed;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.11'/></svg>"),
    linear-gradient(180deg,#f9f6ef 0%,#f4f0e6 100%);
}
.torn-header::before,
.torn-header::after{
  content:'';position:absolute;left:0;right:0;height:14px;pointer-events:none;background-repeat:repeat-x;
}
/* weicher Schatten unter der Kante (anderer Rhythmus → wirkt nicht wiederholt) */
.torn-header::before{
  bottom:-15px;background-size:487px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 14' width='487' height='14'><path d='M0 0H487V7.6L478.7 2.1L474.6 7.1L463.8 12.5L459.6 13.5L455.9 10.1L449.2 11.5L441.1 9.7L431.0 5.9L427.0 8.0L418.9 11.7L411.0 9.2L404.2 9.5L400.5 10.6L394.7 6.3L386.9 2.9L380.1 7.4L373.2 9.2L363.7 8.4L354.7 7.5L346.8 6.0L342.0 10.3L331.7 11.9L322.6 12.0L314.1 9.2L307.0 8.1L300.2 12.4L293.4 10.5L286.6 5.2L280.6 7.0L277.1 3.9L269.5 5.0L263.0 7.1L256.2 7.2L250.0 10.5L240.0 4.8L231.1 10.7L227.1 8.9L219.2 7.8L214.7 8.5L211.7 8.8L206.8 7.2L198.3 5.5L191.9 8.0L186.7 7.0L176.3 8.0L167.4 6.8L159.5 11.0L151.2 8.6L140.3 9.4L131.9 10.2L125.3 7.0L117.5 9.1L110.0 4.3L103.0 5.5L99.1 7.5L93.8 4.6L86.2 8.4L77.6 6.6L69.9 8.4L63.5 9.1L60.0 10.0L54.0 9.0L44.5 6.9L40.5 8.9L37.2 5.0L31.0 5.1L26.2 8.3L16.6 8.7L10.1 4.0L4.2 7.6L0.0 7.6Z' fill='rgba(27,54,93,0.13)'/></svg>");
}
/* Papierkante mit hellem Faserrand */
.torn-header::after{
  bottom:-12px;background-size:641px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 641 14' width='641' height='14'><path d='M0 0H641V8.3L629.9 6.2L621.8 9.0L612.4 6.5L605.1 11.4L601.3 7.2L596.8 9.3L591.4 8.9L588.3 7.4L585.1 9.0L575.2 7.0L569.8 9.1L559.8 12.7L556.4 8.3L551.7 9.5L542.3 7.2L536.0 6.6L528.1 6.2L518.3 5.9L514.3 10.8L508.2 8.1L497.7 11.1L492.9 10.1L487.5 7.6L478.6 10.5L475.2 8.9L466.6 4.3L457.3 5.9L451.2 8.3L445.5 7.5L440.2 12.5L430.4 9.1L426.6 8.5L419.9 7.8L412.0 6.3L407.6 7.4L403.1 13.1L399.0 7.2L394.0 7.8L385.4 7.8L378.1 9.3L367.6 9.6L361.6 5.1L354.3 9.4L344.1 10.3L340.9 6.6L335.1 9.5L325.8 6.5L316.7 8.1L306.4 10.5L299.9 7.6L293.5 8.1L285.1 6.0L279.8 7.6L272.7 9.5L267.4 9.1L257.3 8.1L252.2 6.6L247.4 8.6L237.7 9.8L230.7 8.4L219.8 8.9L214.9 8.3L205.7 8.6L196.7 8.1L190.8 9.3L183.9 8.7L177.1 7.3L173.7 8.0L168.0 8.3L163.5 8.8L159.7 5.9L156.5 7.2L150.4 5.9L144.4 7.2L139.4 9.5L128.9 7.9L119.6 8.0L112.3 9.5L105.5 10.3L98.5 7.0L88.4 9.9L81.1 8.3L72.8 10.1L68.0 7.7L58.4 8.6L50.0 10.5L42.9 8.9L37.1 8.5L26.3 8.4L16.4 7.6L8.3 12.2L0.0 8.3Z' fill='%23fbf9f3'/><path d='M0 0H641V5.9L632.7 7.5L623.4 4.5L613.1 2.6L606.5 10.4L600.3 8.1L592.4 4.6L587.2 6.2L578.5 6.1L571.7 5.9L563.2 12.1L553.8 6.6L548.7 5.1L540.6 4.8L532.4 5.4L524.5 5.0L517.9 4.8L511.0 6.4L504.6 4.8L500.3 3.3L489.7 7.6L482.7 4.9L477.2 7.2L466.9 8.1L460.4 4.9L450.3 6.9L442.0 6.3L433.6 6.6L430.5 13.5L426.8 0.5L417.1 5.8L411.0 4.9L400.9 0.5L394.9 7.4L387.3 3.5L377.3 2.5L368.9 7.0L360.2 6.9L350.0 7.8L339.0 10.3L335.4 5.8L329.6 5.5L319.2 2.1L310.3 5.9L303.7 6.7L296.5 2.4L289.9 6.1L279.6 8.1L271.6 6.3L268.1 4.0L263.7 7.0L258.6 6.3L253.7 6.4L247.4 5.6L237.3 7.0L228.4 8.9L223.4 8.0L218.9 7.2L211.3 2.1L205.4 6.3L200.4 6.6L195.0 5.9L185.9 7.1L182.1 5.3L172.2 6.8L166.8 6.5L156.0 5.0L152.1 6.3L148.0 5.0L140.6 8.8L136.8 6.0L126.0 4.0L122.4 4.1L118.8 9.4L107.9 6.9L104.9 5.7L94.3 9.4L91.0 5.7L82.0 6.6L74.5 11.2L71.5 6.4L63.8 5.5L54.6 1.8L46.6 5.1L37.7 4.7L29.6 3.9L22.3 7.6L15.2 5.2L7.5 7.6L0.0 5.9Z' fill='%23f4f0e6'/></svg>");
}

/* Desktop-Dropdown "Leistungen" */
.nav-item{position:relative}
.nav-dd{
  position:absolute;left:-14px;top:100%;padding-top:18px;min-width:290px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-item:hover .nav-dd,.nav-item:focus-within .nav-dd{opacity:1;visibility:visible;transform:none}
.nav-dd-inner{background:#fcfaf5;border:2px solid var(--ink-navy);box-shadow:4px 4px 0 var(--ink-navy);padding:.5rem}
.nav-dd a{display:block;padding:.65rem .8rem;font-size:.85rem;font-weight:600;color:var(--ink-navy);border-left:3px solid transparent;transition:all .15s}
.nav-dd a small{display:block;font-weight:400;font-size:.72rem;color:#5a6577;margin-top:2px;font-family:var(--font-main)}
.nav-dd a:hover{background:#f2ebd9;border-left-color:var(--stamp-red);padding-left:1.05rem}
.nav-link{font-weight:600;font-size:.92rem;color:var(--ink-navy);position:relative;padding:.4rem 0}
.nav-link::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--stamp-red);transition:right .22s ease}
.nav-link:hover::after,.nav-item:hover>.nav-link::after{right:0}

/* ════════════════════════════════════════════
   ERGÄNZUNGEN FÜR ALLE SEITEN
   ════════════════════════════════════════════ */

/* FAQ */
.faq-item{margin-bottom:12px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font-weight:700;color:var(--ink-navy);padding:16px 18px;background:none;border:none;cursor:pointer;font-family:var(--font-main);font-size:.95rem}
.faq-icon{font-family:var(--font-mono);font-weight:700;transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{padding:0 18px 18px;font-size:.88rem;line-height:1.7;color:#334155;border-top:1px dashed rgba(27,54,93,.2);padding-top:14px;margin:0 18px;padding-left:0;padding-right:0}

/* Balken (Beispielrechnungen) */
.bar-track{height:14px;background:#efe9db;border:1.5px solid #1b365d;position:relative;overflow:hidden}
.bar-fill{height:100%;width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.bar-before{background:repeating-linear-gradient(45deg,#c84b31 0 4px,#eab3a5 4px 8px)}
.bar-after{background:#1b365d}
.fade-in-up.visible .bar-fill{width:var(--w)}
.fade-in-up.visible .bar-fill.bar-after{transition-delay:.35s}

/* Fluss-Grafik */
.flow-line{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.5s ease}
.fade-in-up.visible .flow-line{stroke-dashoffset:0}
.flow-target{opacity:0;transition:opacity .5s ease 1.2s}
.fade-in-up.visible .flow-target{opacity:1}

/* Roadmap */
.road-step{position:relative}
.road-num{width:44px;height:44px;border:2px solid #1b365d;background:#fcfaf5;box-shadow:3px 3px 0 #1b365d;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:#1b365d;transition:all .2s}
.road-step:hover .road-num{background:#1b365d;color:#fcfaf5;box-shadow:3px 3px 0 #c84b31}
@media(min-width:1024px){
  .road-line{position:absolute;top:22px;left:44px;right:-24px;border-top:2px dashed rgba(27,54,93,.35)}
  .road-step:last-child .road-line{display:none}
}

/* Skizze Terminbuch */
.sketch-cell{border:1px dashed rgba(27,54,93,.25);min-height:120px;position:relative}
.sketch-block{position:absolute;left:4px;right:4px;font-family:var(--font-mono);font-size:9px;padding:2px 4px;line-height:1.2}

/* Auswahl-Chips (Check, Checklisten) */
.chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;background:#fff;border:1.5px solid #1b365d;font-size:.9rem;color:#1b365d;cursor:pointer;transition:all .15s;font-family:var(--font-main)}
.chip:hover{background:#fdf8ec;transform:translate(-1px,-1px);box-shadow:2px 2px 0 #1b365d}
.chip .box{width:18px;height:18px;border:2px solid #1b365d;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff}
.chip.on{background:#fef3c7;box-shadow:2px 2px 0 #c84b31;border-color:#c84b31}
.chip.on .box{background:#c84b31;border-color:#c84b31}

/* Meter (freier Kopf etc.) */
.meter{display:flex;gap:4px}
.meter span{flex:1;height:10px;border:1.5px solid #1b365d;background:#fff;transition:background .3s}
.meter span.on{background:#1b365d}
.meter span.on.warm{background:#c84b31;border-color:#c84b31}

/* Vorher/Nachher-Schieberegler */
.compare{position:relative;overflow:hidden;user-select:none;border:2px solid #1b365d;box-shadow:4px 4px 0 #1b365d;background:#fff}
.compare-layer{position:absolute;inset:0}
.compare-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#c84b31;transform:translateX(-1.5px);pointer-events:none}
.compare-handle::after{content:'⇆';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;background:#c84b31;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fcfaf5}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.xl-cell{border-right:1px solid #d9dee5;border-bottom:1px solid #d9dee5;padding:3px 6px;font-family:var(--font-mono);font-size:10px;white-space:nowrap;overflow:hidden}

/* Beleg-Reise */
.trip-track{position:relative;height:6px;background:repeating-linear-gradient(90deg,#1b365d 0 8px,transparent 8px 14px);margin:30px 22px 26px}
.trip-token{position:absolute;top:50%;width:26px;height:32px;background:#fcfaf5;border:2px solid #c84b31;box-shadow:2px 2px 0 #c84b31;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.65,0,.35,1)}
.trip-token::before{content:'';position:absolute;left:4px;right:4px;top:6px;height:2px;background:#c84b31;box-shadow:0 5px 0 #eab3a5,0 10px 0 #eab3a5,0 15px 0 #eab3a5}
.trip-stop{cursor:pointer;text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#64748b;transition:color .2s}
.trip-stop .dot{width:14px;height:14px;border:2px solid #1b365d;background:#fcfaf5;margin:0 auto 6px;transition:background .2s}
.trip-stop.on{color:#1b365d}
.trip-stop.on .dot{background:#c84b31;border-color:#c84b31}

/* Rote Korrektur-Anmerkungen (Angebots-Skizze) */
.redmark{font-family:var(--font-hand);color:#c84b31;font-size:1.25rem;line-height:1.1}

/* Ja/Unsicher-Schalter */
.yn{display:flex;border:1.5px solid #1b365d;flex-shrink:0}
.yn button{padding:6px 12px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#1b365d;background:#fff;cursor:pointer;border:none}
.yn button+button{border-left:1.5px solid #1b365d}
.yn button.on-yes{background:#1b365d;color:#fff}
.yn button.on-no{background:#c84b31;color:#fff}

/* Slogan */
.slogan{font-family:var(--font-hand);color:#1b365d;line-height:1}