/* /webseiten/: Kurzfassung des Einstiegs am Handy, Fakten, Ablauf in vier Schritten, Website-Miniaturen.
   Die Miniaturen (mini-*) stammen aus dem Claude-Design-Handoff vom 22.09.2026 und behalten ihr eigenes Aussehen,
   nur Raster und Bildunterschriften folgen der Plane. Fotos und Lizenz: README.md, Abschnitt Transport-Webseiten. */

/* Schriften der Miniaturen, nur auf dieser Seite */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* ---------- Einstieg ---------- */
.web-kopf h1 { max-width: 28ch; }
.web-kopf .lead { margin-bottom: 2rem; }
.web-kurz { display: none; }
.web-kopf .knopf-zeile { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 599px) {
  .web-kurz { display: block; }
  .web-voll { display: none; }
  .web-kopf .knopf-zwei { min-height: 48px; }
}

/* Drei Fakten als Zeilen mit Haarlinien */
.web-fakten { display: grid; border-top: 2px solid var(--navy); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.web-fakten li { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.web-fakten strong { display: block; margin-bottom: .3rem; font: 800 clamp(1.5rem, 2.2vw, 1.875rem)/1.05 var(--schrift-plane); text-transform: uppercase; color: var(--navy); }
.web-fakten span { display: block; color: var(--text-2); max-width: 40ch; }
@media (min-width: 760px) {
  .web-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .web-fakten li { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- Ablauf in vier Schritten ---------- */
@media (min-width: 980px) {
  .web-ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .web-ablauf .schritt { padding-right: 1.75rem; }
  .web-ablauf .schritt + .schritt { padding-left: 2.75rem; }
}

/* ---------- Rahmen um die Miniaturen (Plane) ---------- */
.web-vorschau .hinweis { margin-top: 2.5rem; max-width: 80ch; }
.mini-caption { border-top: 2px solid var(--navy); padding-top: .9rem; }
.mini-title { font: 800 1.5rem/1.1 var(--schrift-plane); text-transform: uppercase; color: var(--navy); }
.mini-tagline { font-size: .9375rem; color: var(--text-2); white-space: nowrap; }
.mini-desc { margin-top: .6rem; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }

/* ===== Website-Miniaturen, Regeln aus css/style.css (Stand 4afa1f2) ===== */
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 44px;justify-content:center}
@media (max-width:700px){.mini-grid{grid-template-columns:1fr}}
.mini-item{max-width:540px;min-width:0;width:100%}
.mini-frame{position:relative;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(28,42,58,.08),0 14px 36px rgba(28,42,58,.12);font-family:Inter,system-ui,sans-serif;font-size:5px;line-height:1.35;color:#1C2A3A;margin-bottom:30px;text-align:left}
.mini-frame *{box-sizing:border-box;margin:0}
.mini-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 10px;border-bottom:1px solid #E6E8EC}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:#FF5F57;flex:none}
.mini-bar i:nth-child(2){background:#FEBC2E}
.mini-bar i:nth-child(3){background:#28C840}
.mini-url{flex:1;height:11px;margin-left:8px;padding:0 8px;border-radius:6px;background:#F1F2F4;font-size:5px;line-height:11px;color:#8A8F98}
.mini-page{position:relative;height:300px;overflow:hidden;border-radius:0 0 8px 8px}
.mini-nav{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 16px}
.mini-logo{display:flex;align-items:center;gap:4px;font-size:6px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mini-logo i{width:7px;height:7px;border-radius:1.5px;flex:none}
.mini-links{display:flex;align-items:center;gap:9px;font-size:5px;white-space:nowrap}
.mini-btn{display:inline-block;padding:3.5px 6px;border-radius:2px;font-size:5px;font-weight:600;line-height:1;white-space:nowrap}
.mini-btn.is-ghost{background:transparent !important;color:inherit !important;border:.5px solid currentColor}
.mini-h{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.mini-eyebrow{font-size:4.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mini-p{font-size:4.5px;opacity:.78;text-wrap:pretty}
.mini-img{display:block;width:100%;height:100%;object-fit:cover}
.mini-field{display:flex;align-items:center;height:9px;padding:0 4px;border-radius:2px;font-size:4.2px;color:#6B7280;background:#fff;border:.5px solid #D5D9E0;white-space:nowrap;overflow:hidden}
.mini-field.is-dark{background:#1A211D;border-color:#2F3A33;color:#98A29C}
.mini-field.is-anthra{background:#3A3A3A;border-color:#4A4A4A;color:#B8B4AC}
.mini-row{display:flex;gap:4px;align-items:center}
.mini-row > *{flex:1}
.mini-strip{display:flex}
.mini-stat b{display:block;font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:8px;line-height:1.1}
.mini-stat span{font-size:4px;opacity:.7}
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-card .mini-h4{font-size:5.5px;font-weight:600;line-height:1.2}
.mini-foot{display:flex;justify-content:space-between;padding:6px 16px;font-size:4px;opacity:.6}

/* Handy */
.mini-phone{position:absolute;right:22px;bottom:-18px;width:98px;height:200px;padding:4px;border-radius:13px;background:#0B0B0D;box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.18);font-size:4.5px;z-index:3;color:#111827}
.mini-phone::before{content:"";position:absolute;top:8px;left:50%;width:26px;height:4px;transform:translateX(-50%);border-radius:2px;background:#0B0B0D;z-index:2}
.mini-screen{position:relative;height:100%;overflow:hidden;border-radius:10px;display:flex;flex-direction:column;background:#fff}
.mini-screen .mini-nav{height:20px;padding:4px 8px 0;flex:none}
.mini-screen .mini-logo{font-size:4.5px}
.mini-form{display:flex;flex-direction:column;gap:4px;padding:8px}
.mini-form .mini-h{font-size:7px;margin-bottom:1px}
.mini-form .mini-p{margin-bottom:3px}
.mini-form .mini-btn{text-align:center;padding:4.5px 6px;margin-top:2px}
.mini-or{text-align:center;font-size:4px;opacity:.55}

/* 1 Spedition */
[data-mini="spedition"] .mini-page{background:#F3F4F7;color:#14213D}
[data-mini="spedition"] .mini-nav{background:#14213D;color:#fff}
[data-mini="spedition"] .mini-logo i{background:#E07A1F}
[data-mini="spedition"] .mini-btn{background:#E07A1F;color:#fff}
[data-mini="spedition"] .mini-hero{display:grid;grid-template-columns:1fr 1fr;height:160px;background:#14213D;color:#fff}
[data-mini="spedition"] .mini-hero > div:first-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:6px 16px 14px;min-height:0;overflow:hidden}
[data-mini="spedition"] .mini-hero .mini-eyebrow{color:#E07A1F}
[data-mini="spedition"] .mini-hero .mini-h{font-size:10px}
[data-mini="spedition"] .mini-hero .mini-row{flex:none;margin-top:3px}
[data-mini="spedition"] .mini-strip{position:relative;z-index:1;margin:-16px 16px 0;padding:8px 14px;background:#fff;border-radius:3px;box-shadow:0 4px 14px rgba(20,33,61,.12);justify-content:space-between}
[data-mini="spedition"] .mini-cards{padding:12px 16px 0}
[data-mini="spedition"] .mini-card{padding:8px;background:#fff;border:.5px solid #E1E4EA;border-radius:2px}
[data-mini="spedition"] .mini-card .mini-h4{margin-bottom:2px}
[data-mini="spedition"] .mini-phone .mini-nav{background:#14213D;color:#fff}

/* 2 Kurier */
[data-mini="kurier"] .mini-page{background:#0F1412;color:#F2F5F3}
[data-mini="kurier"] .mini-nav{position:relative;z-index:2;background:#0F1412}
[data-mini="kurier"] .mini-logo i{background:#39D98A;border-radius:50%}
[data-mini="kurier"] .mini-btn{background:#39D98A;color:#0F1412}
[data-mini="kurier"] .mini-hero{position:relative;height:186px}
[data-mini="kurier"] .mini-hero .mini-img{position:absolute;inset:0;object-position:60% 40%}
[data-mini="kurier"] .mini-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,20,18,.94) 0%,rgba(15,20,18,.6) 50%,rgba(15,20,18,.15) 100%),linear-gradient(0deg,#0F1412 0%,rgba(15,20,18,0) 45%)}
[data-mini="kurier"] .mini-hero-text{position:absolute;left:16px;bottom:22px;width:210px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
[data-mini="kurier"] .mini-hero-text .mini-eyebrow{color:#39D98A}
[data-mini="kurier"] .mini-hero-text .mini-h{font-size:10px;color:#fff}
[data-mini="kurier"] .mini-calc{position:absolute;right:16px;top:14px;width:132px;z-index:1;display:flex;flex-direction:column;gap:4px;padding:8px;background:rgba(22,28,25,.96);border:.5px solid #2F3A33;border-radius:3px}
[data-mini="kurier"] .mini-calc .mini-h4{font-size:5.5px;font-weight:600;margin-bottom:1px}
[data-mini="kurier"] .mini-calc .mini-btn{text-align:center;margin-top:1px}
[data-mini="kurier"] .mini-strip{justify-content:space-around;padding:8px 16px;border-top:.5px solid #26302A;border-bottom:.5px solid #26302A;text-align:center}
[data-mini="kurier"] .mini-stat b{font-family:Inter,system-ui,sans-serif;font-weight:700;color:#39D98A;letter-spacing:-.02em}
[data-mini="kurier"] .mini-cards{padding:12px 16px 0}
[data-mini="kurier"] .mini-card{padding:8px;background:#161C19;border-radius:2px}
[data-mini="kurier"] .mini-card .mini-h4{margin-bottom:2px}
[data-mini="kurier"] .mini-screen{background:#0F1412;color:#F2F5F3}
[data-mini="kurier"] .mini-price{font-family:"Source Serif 4",Georgia,serif;font-size:15px;font-weight:600;line-height:1;color:#fff;margin:2px 0}
[data-mini="kurier"] .mini-form .mini-eyebrow{color:#39D98A}
[data-mini="kurier"] .mini-detail{padding:5px;border:.5px solid #2F3A33;border-radius:2px;font-size:4.2px;line-height:1.5;opacity:.85;margin:3px 0 2px}

/* 3 Zustellung */
[data-mini="zustellung"] .mini-page{background:#fff;color:#111827}
[data-mini="zustellung"] .mini-nav{border-bottom:.5px solid #E5E7EB}
[data-mini="zustellung"] .mini-logo i{background:#1F6FEB}
[data-mini="zustellung"] .mini-btn{background:#1F6FEB;color:#fff}
[data-mini="zustellung"] .mini-btn.is-wa{background:#25D366;color:#fff}
[data-mini="zustellung"] .mini-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;padding:16px 16px 14px}
[data-mini="zustellung"] .mini-hero > div:first-child{display:flex;flex-direction:column;gap:5px}
[data-mini="zustellung"] .mini-hero .mini-eyebrow{color:#1F6FEB}
[data-mini="zustellung"] .mini-hero .mini-h{font-size:10px}
[data-mini="zustellung"] .mini-hero .mini-form{padding:0;margin-top:3px}
[data-mini="zustellung"] .mini-hero .mini-form .mini-btn{margin:0}
[data-mini="zustellung"] .mini-hero .mini-img{height:120px;border-radius:4px}
[data-mini="zustellung"] .mini-strip{justify-content:space-between;padding:7px 16px;background:#EEF4FE;color:#1F6FEB;font-weight:600;font-size:5px}
[data-mini="zustellung"] .mini-cards{padding:12px 16px 0}
[data-mini="zustellung"] .mini-card{padding:8px;border:.5px solid #E5E7EB;border-radius:3px;display:flex;flex-direction:column;gap:2px}
[data-mini="zustellung"] .mini-tag{align-self:flex-start;padding:1.5px 3px;border-radius:2px;background:#EEF4FE;color:#1F6FEB;font-size:3.8px;font-weight:600;margin-bottom:1px}
[data-mini="zustellung"] .mini-phone .mini-nav{background:#1F6FEB;color:#fff;border:0}
[data-mini="zustellung"] .mini-phone .mini-logo i{background:#fff}

/* 4 Schwertransport */
[data-mini="schwer"] .mini-page{background:#F7F5F0;color:#2B2B2B}
[data-mini="schwer"] .mini-nav{background:#2B2B2B;color:#F7F5F0}
[data-mini="schwer"] .mini-logo i{background:#F2B705}
[data-mini="schwer"] .mini-btn{background:#F2B705;color:#2B2B2B}
[data-mini="schwer"] .mini-hero{height:100px;position:relative}
[data-mini="schwer"] .mini-hero .mini-img{object-position:50% 45%}
[data-mini="schwer"] .mini-band{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 16px;background:#2B2B2B;color:#F7F5F0}
[data-mini="schwer"] .mini-band .mini-h{font-size:9px;max-width:270px}
[data-mini="schwer"] .mini-band .mini-btn{flex:none}
[data-mini="schwer"] .mini-strip{justify-content:space-between;padding:10px 16px 8px;border-bottom:.5px solid #DDD8CC}
[data-mini="schwer"] .mini-stat b{font-size:15px;letter-spacing:-.02em}
[data-mini="schwer"] .mini-stat b em{font-style:normal;color:#F2B705}
[data-mini="schwer"] .mini-stat span{display:block;margin-top:1px}
[data-mini="schwer"] .mini-refs{display:flex;justify-content:space-between;align-items:baseline;padding:10px 16px 6px}
[data-mini="schwer"] .mini-refs .mini-h{font-size:7px}
[data-mini="schwer"] .mini-refs span{font-size:4.5px;color:#8A6A3B}
[data-mini="schwer"] .mini-cards{padding:0 16px}
[data-mini="schwer"] .mini-card{background:#fff;border-radius:2px;overflow:hidden}
[data-mini="schwer"] .mini-card .mini-img{height:46px}
[data-mini="schwer"] .mini-card div{padding:5px 6px}
[data-mini="schwer"] .mini-card span{font-size:4px;opacity:.65}
[data-mini="schwer"] .mini-screen{background:#2B2B2B;color:#F7F5F0}
[data-mini="schwer"] .mini-screen .mini-logo i{background:#F2B705}

/* Bildunterschriften: Anordnung wie vorher, Schrift und Farben siehe "Rahmen um die Miniaturen" oben */
.mini-caption{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap}

@media (max-width:640px){
  .mini-grid{gap:44px}
  .mini-page{height:260px}
  .mini-phone{right:12px;width:84px;height:172px}
}

/* "Was Ihre Webseite kann": zwei Spalten von oben nach unten gelesen, wie auf der alten Seite */
@media (min-width: 980px) { .web-punkte { grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }