/* Angebotsseiten im Streifen-Look (Fassung 4), umgebaut am 19.10.2026.
   Gilt für tool-talk.html, brauche-ich-ki.html und schluesseluebergabe.html.
   Baut auf gemeinsam.css und fassung-4.css auf, wie startklar.html und index.html.
   Die Bausteine sind von startklar.html übernommen (Preisfeld, Fragen, Schluss, PS),
   dazu die Teile, die es nur auf den Call-Seiten gibt (Karten mit "Löst", Platten,
   Siegel, Sprechblasen). Text der Seiten ist unverändert, Tina liest ihn noch. */

/* Kopf: Kasten links, Bild rechts daneben, nichts liegt übereinander (Tinas Regel vom 19.10.2026) */
.f4 .hero{align-items:center}
.f4 .hero-kasten{max-width:960px}
.f4 .hero h1{line-height:1.06;margin-bottom:26px}
.f4 .hero .mark{background:none;border:0;box-shadow:none;padding:0;margin:0;transform:none;color:var(--o);text-shadow:3px 3px 0 var(--k)}
.f4 .hero .intro p{font-size:clamp(20px,1.3vw,27px);max-width:60ch}
.f4 .hero .fuer-wen{display:inline-block;background:var(--l);color:var(--w);border:3px solid var(--k);padding:6px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:var(--text-klein);margin:0 0 20px;transform:rotate(-1deg)}
.f4 .hero .btn{margin-top:28px}
.btn .pfeil{width:1em;height:1em;vertical-align:-.15em;margin-left:10px}
.mitte-mikro{margin-left:auto;margin-right:auto}
.schluss .danach{margin-top:22px}
.nicht-selbst{font-weight:700}
.mikro{margin-top:14px;font-size:var(--text-klein);font-weight:600;color:#6b5a7a;max-width:56ch}
.f4 .hero-fenster{margin:0;justify-self:center;width:min(520px,100%)}
.f4 .hero-fenster .sticker{position:relative;display:inline-block;margin:-26px 0 0 8%}
.f4 .hero-fenster .fenster svg{max-height:420px}

/* Zwei Sprechblasen statt Comic-Fenster (Brauche ich KI, Schlüsselübergabe "Was nicht drin ist") */
.blasen{display:grid;gap:26px;padding:10px 0}
.blase{position:relative;max-width:420px;background:var(--w);border:5px solid var(--k);box-shadow:10px 10px 0 var(--k);padding:18px 24px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(19px,1.25vw,27px);line-height:1.25}
.blase::after{content:"";position:absolute;bottom:-22px;left:34px;width:26px;height:26px;background:inherit;border-right:5px solid var(--k);border-bottom:5px solid var(--k);transform:skewX(-30deg) rotate(45deg)}
.blase.eins{transform:rotate(-2deg)}
.blase.zwei{justify-self:end;background:var(--o);transform:rotate(1.5deg)}
.blase.zwei::after{left:auto;right:34px}

/* Erfahrungssatz auf der Schlüsselübergabe: über die ganze Breite unter Kasten und Bild */
.f4 .hero .erfahrung{grid-column:1 / -1;background:var(--w);border:5px solid var(--k);box-shadow:10px 10px 0 var(--k);padding:20px 26px;font-weight:600;max-width:1240px;transform:rotate(-.8deg);margin-top:10px}

/* Textabschnitte: Überschrift als Schild (aus fassung-4.css), Text im weissen Kasten */
.text-abschnitt{padding:var(--luft) var(--edge) 30px}
.text-abschnitt .kasten{max-width:1240px;padding:36px;transform:rotate(-.6deg)}
.text-abschnitt:nth-of-type(even) .kasten{transform:rotate(.6deg)}
.prose a{color:var(--l);font-weight:700}
.prose h3.unter-title{margin:28px 0 12px}
.einzeiler{margin:0 0 30px;max-width:80ch}
.text-abschnitt .nachtext{margin-top:56px}
@media(min-width:1121px){
  .spalten{column-count:2;column-gap:clamp(40px,4vw,90px);column-rule:3px dashed var(--k)}
  .spalten p{break-inside:avoid}
  .spalten h3.unter-title{column-span:all}
}

/* Streifenfeld mit weissem Kasten (früher die volle lila oder orange Fläche) */
.feld{position:relative;padding:110px var(--edge) 110px;margin-top:50px;isolation:isolate}
.feld::before{content:"";position:absolute;inset:0 -10vw;background:var(--streifen);transform:skewY(-2.5deg);border-top:5px solid var(--k);border-bottom:5px solid var(--k);z-index:-1}
.feld .kasten{max-width:1240px;padding:36px;transform:rotate(1deg);box-shadow:14px 14px 0 var(--k)}

/* Über mich: Foto und Text nebeneinander, Text läuft nie unter das Foto (wie index.html) */
.f4 .ueber{padding-top:var(--luft)}
.f4 .ki-hinweis{display:inline-block;background:var(--w);border:2px solid var(--k);padding:4px 10px;color:var(--ink);font-weight:700;margin-top:40px;position:relative;z-index:1;transform:rotate(-1deg)}
@media(min-width:1121px){
  .f4 .ueber{display:flex;align-items:flex-start;gap:clamp(28px,4vw,70px)}
  .f4 .ueber::after{display:none}
  .f4 .ueber-bild{flex:0 0 clamp(300px,36%,520px);float:none;margin-right:0}
  .f4 .ueber .prose{flex:1;min-width:0}
}
@media(max-width:1120px){.f4 .ueber-bild{float:none;width:min(520px,100%);margin:0 0 50px}}

/* Karten im Streifenfeld: gerade nebeneinander mit Abstand, leicht schief, nichts überlappt */
.f4 .produkte{margin-top:50px}
.f4 .produkte .cards{column-gap:clamp(28px,2.8vw,48px)}
.f4 .cards.zwei-sp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}  /* schiefe breite Karten brauchen mehr Luft nach unten */
.f4 .cards{column-gap:clamp(28px,2.8vw,48px);row-gap:56px}
.f4 .card.links,.f4 .card.mitte,.f4 .card.rechts{margin:0;box-shadow:14px 14px 0 var(--k)}
.f4 .card.links,.js .f4 .card.links.rein.da{transform:rotate(-1.5deg)}
.f4 .card.mitte,.js .f4 .card.mitte.rein.da{transform:rotate(1.2deg)}
.f4 .card.rechts,.js .f4 .card.rechts.rein.da{transform:rotate(-1deg)}
.loest{display:block;font-size:clamp(15px,.85vw,19px);font-weight:600;font-style:italic;color:#6b5a7a;margin-top:12px;padding-top:12px;border-top:3px dashed var(--k)}
.obendrauf{margin-top:60px;background:var(--w);border:5px solid var(--k);box-shadow:12px 12px 0 var(--k);padding:26px 30px;max-width:900px;transform:rotate(-1.2deg)}
.obendrauf p{font-size:var(--text-klein);margin-bottom:10px}
.f4 .produkte .kopf,.f4 .produkte .obendrauf{position:relative}
.f4 .produkte .unter-karten{margin-top:60px}

/* Platten: Was nicht drin ist, Zusage, Plätze */
.platte-abschnitt{padding:50px var(--edge) 30px}
.platte{max-width:1240px;background:var(--w);border:5px solid var(--k);box-shadow:12px 12px 0 var(--k);border-left-width:16px;padding:30px 34px;transform:rotate(-1deg)}
.platte.rechts{transform:rotate(1deg);border-left-width:5px;border-right-width:16px}
.platte p,.platte li{font-size:var(--text-klein)}
.platte p{margin-bottom:12px}
.platte ul{list-style:none;display:grid;gap:12px;margin-top:6px}
.platte li{padding-left:32px;position:relative}
.platte li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border:3px solid var(--k);background:var(--o)}
.mit-blasen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.6fr);gap:clamp(30px,4vw,70px);align-items:center;max-width:1240px}
.mit-blasen .platte{max-width:none}

/* Preis */
.preis-feld{position:relative;padding:120px var(--edge) 120px;margin-top:60px;isolation:isolate;text-align:center}
.preis-feld::before{content:"";position:absolute;inset:0 -10vw;background:var(--streifen);transform:skewY(2.5deg);border-top:5px solid var(--k);border-bottom:5px solid var(--k);z-index:-1}
.preis-kasten{position:relative;display:inline-block;text-align:left;background:var(--w);border:8px solid var(--k);box-shadow:20px 20px 0 var(--k);padding:44px;max-width:1000px;transform:rotate(-1.5deg)}
.gross-preis{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(64px,6vw,120px);line-height:1;letter-spacing:-.04em;text-align:center}
.gross-preis small{display:block;font-size:clamp(17px,1vw,22px);font-weight:600;letter-spacing:0;color:#6b5a7a;margin-top:12px}
.preis-kasten p{margin-top:16px;font-size:var(--text-klein)}
.preis-kasten .mitte{text-align:center}
.rechnung{margin-top:26px;padding-top:6px;border-top:3px dashed var(--k)}
.siegel{position:absolute;top:-44px;right:-34px;width:clamp(100px,8vw,150px);transform:rotate(11deg);z-index:2}
.siegel svg{width:100%;height:auto;display:block;filter:drop-shadow(5px 5px 0 #111)}

/* Fragen (wie startklar.html) */
.fragen{padding:var(--luft) var(--edge) 40px}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:10px;align-items:start}
details{background:var(--w);border:5px solid var(--k);box-shadow:8px 8px 0 var(--k)}
details:nth-child(odd){transform:rotate(-.8deg)}
details:nth-child(even){transform:rotate(.8deg)}
summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(18px,1.05vw,24px);display:flex;gap:14px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
.zeichen{flex:0 0 auto;width:30px;height:30px;border:3px solid var(--k);display:grid;place-items:center;background:var(--o);font-size:18px;line-height:1}
details[open] .zeichen{background:var(--l);color:var(--w)}
.antwort{padding:0 22px 22px 66px;font-size:var(--text-klein)}
.antwort a{color:var(--l);font-weight:700}

/* Schluss und PS */
.schluss{padding:70px var(--edge) 90px;text-align:center}
.schluss .kasten{display:inline-block;text-align:center;max-width:1100px;transform:rotate(1deg);box-shadow:14px 14px 0 var(--k);padding:40px 48px}
.schluss .kasten p{margin-bottom:14px}
.ps{margin:50px auto 0;max-width:1000px;text-align:left;background:var(--w);border:5px solid var(--k);box-shadow:10px 10px 0 var(--k);padding:24px 28px;transform:rotate(-1.2deg)}
.ps p,.ps{font-size:var(--text-klein)}

/* Alle Schatten schwarz wie auf Startseite und Kursseite (Tina, 19.10.2026) */
.f4 h2{box-shadow:12px 12px 0 var(--k)}
.f4 .feld h2,.f4 .preis-feld h2{box-shadow:12px 12px 0 var(--k)}

@media(max-width:1120px){
  .faq,.f4 .cards.zwei-sp,.mit-blasen{grid-template-columns:minmax(0,1fr)}
  .f4 .hero-fenster{margin-top:40px}
}
@media(max-width:640px){
  .preis-kasten{padding:24px;border-width:6px;box-shadow:12px 12px 0 var(--k)}
  .antwort{padding-left:22px}
  .siegel{top:-30px;right:-12px;width:88px}
  .schluss .kasten{padding:26px 22px}
  .text-abschnitt .kasten,.feld .kasten{padding:22px}
  .platte{padding:22px 20px;border-left-width:10px}
  .platte.rechts{border-left-width:5px;border-right-width:10px}
  details,.platte,.platte.rechts,.text-abschnitt .kasten,.text-abschnitt:nth-of-type(even) .kasten{transform:none}
  .blase{font-size:19px}
}

/* Breite Bildschirme wie auf startklar.html: Inhalt mittig, Streifen über die ganze Breite */
@media(min-width:1121px){
  .f4{--breit:1240px}
  .f4 .text-abschnitt,.f4 .feld,.f4 .ueber,.f4 .platte-abschnitt,.f4 .fragen,.f4 .schluss{max-width:calc(var(--breit) + 2*var(--edge));margin-left:auto;margin-right:auto}
  .f4 .produkte .kopf,.f4 .produkte .cards,.f4 .produkte .obendrauf,.f4 .produkte .unter-karten{max-width:var(--breit);margin-left:auto;margin-right:auto}
  .f4 .produkte .obendrauf{margin-left:max(0px,calc((100% - var(--breit)) / 2))}
  .f4 .hero{max-width:calc(1480px + 2*var(--edge));margin-left:auto;margin-right:auto}
  .f4 .hero::before{inset:0 -50vw}
  .f4 .feld::before,.f4 .produkte::before{left:-50vw;right:-50vw}
  .f4 .hero h1{font-size:clamp(40px,4.1vw,72px)}
}

/* Hereinfliegen wie auf startklar.html, gesteuert von angebot.js */
.js .f4 .rein2{opacity:0;transition:opacity .45s ease,translate .8s cubic-bezier(.3,1.3,.5,1),scale .6s cubic-bezier(.3,1.5,.5,1),rotate .8s cubic-bezier(.3,1.3,.5,1)}
.js .f4 .rein2.von-links{translate:-45vw 0;rotate:-8deg}
.js .f4 .rein2.von-rechts{translate:45vw 0;rotate:8deg}
.js .f4 .rein2.faellt{translate:0 -50vh;rotate:-12deg}
.js .f4 .rein2.hoch{translate:0 90px}
.js .f4 .rein2.plopp{scale:.35;rotate:8deg}
.js .f4 .rein2.da2{opacity:1;translate:0 0;scale:1;rotate:0deg}
@media(prefers-reduced-motion:reduce){.js .f4 .rein2{opacity:1;translate:none;scale:none;rotate:none;transition:none}}