/* Riss im Beton (Referenz docs/riss-demo.html, Variante "Nachher"): Hero und Kontaktbanner.
   Geometrie und Animation stehen als Inline-SVG im HTML, js/riss.js ergänzt nur das Abdichten. */

/* Beton statt reinem Schwarz: Noise plus leichte Fleckigkeit, kein zusätzliches Asset */
.hero.dunkel,.kontakt.dunkel{position:relative;isolation:isolate;background:#1c1c1a;}
.hero.dunkel::before,.kontakt.dunkel::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(60% 50% at 20% 30%, rgba(255,255,255,.05), transparent 70%),
		radial-gradient(50% 60% at 80% 70%, rgba(255,255,255,.035), transparent 70%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .48 0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size:auto,auto,240px 240px;
}

/* Riss-Ebene: dekorativ, nur die Risslinie selbst nimmt Zeiger und Klicks an (js/riss.js) */
.riss{display:block;height:auto;pointer-events:none;overflow:hidden;}

/* Hero: drei Risse gleichmäßig über die dunkle Fläche (oben, Mitte, unten), je höchstens 640 px breit.
   Riss 1 liegt über einem Streifen ohne Text; 2 und 3 liegen hinter dem Text, der Text bleibt bedienbar. */
/* B-07: nur senkrecht beschneiden (Riss 3 ragt ab 992 px 70 px unter den Abschnitt); seitlich bleibt der Text sichtbar, auch bei vergrößerter Schrift */
.hero.dunkel{overflow-y:clip;}
.hero-inner{position:relative;}
.riss-hero{grid-row:1;grid-column:1;align-self:start;position:relative;z-index:1;width:100%;max-width:640px;}
.riss-hero-2{align-self:center;justify-self:end;z-index:0;max-width:560px;}
.riss-hero-3{align-self:end;z-index:0;max-width:600px;}
.hero .hero-text{grid-row:1;grid-column:1;position:relative;z-index:1;pointer-events:none;}
.hero .hero-text :is(h1,.hero-lead,.btn,.hero-link){pointer-events:auto;}
/* Mobil (B-03): Rissfläche begrenzt, damit Überschrift und Button im ersten Bildschirm bleiben (320x568: Button "Schaden besprechen" ganz sichtbar).
   Das SVG wird verkleinert (--rhw = Breite, Höhe = 0,275 x Breite) statt über den Text zu laufen; der Text beginnt unter dem ganzen SVG
   und endet über dem unteren. Riss und Tropfenweg liegen so weiter nie hinter Text (tests/browser/riss.cjs). */
@media (max-width:991.98px){
	.hero.dunkel{--rhw:min(44vw,360px);}
	.riss-hero,.riss-hero-3{width:var(--rhw);}
	.hero .hero-text{padding-top:calc(var(--rhw) * .275 + .5rem);padding-bottom:calc(var(--rhw) * .275 + .5rem);}
	.riss-hero-2{display:none;}
}
@media (min-width:992px){
	.riss-hero{grid-column:1 / 3;}
	.riss-hero-2,.riss-hero-3{grid-column:1 / 3;}
	.riss-hero-3{margin-bottom:-70px;}
	.hero .hero-text{grid-column:2;padding-top:max(var(--abstand),calc(min(640px,50vw - 66px) * .275 + 8px));}
	.hero .hero-bild{grid-row:1;}
}

/* Kontaktbanner: drei Risse mit Feuchtfleck und Tropfen gleichmäßig über die Höhe (oben rechts, Mitte rechts, unten links).
   Das SVG ist 110 hoch wie im Hero, damit der Tropfen Platz hat; die Risslinie liegt bei 34,5 % der Höhe. */
.kontakt.dunkel{--rw:min(560px,100vw);overflow:hidden;}
.kontakt .wrap{position:relative;z-index:1;pointer-events:none;}
.kontakt .wrap :is(h2,h3,p,a,button,input,textarea,label,ul,ol,details,summary){pointer-events:auto;}
.riss-kontakt{position:absolute;top:0;right:0;z-index:1;width:var(--rw);}
.riss-kontakt-2{top:calc(50% - var(--rw) * .095);z-index:0;}
.riss-kontakt-3{top:auto;bottom:calc(var(--rw) * -.125);right:auto;left:0;z-index:0;}
/* Ab 992 px liegen Texte links (Startseite: alles in der linken Spalte, rechts nur Risse). Die Rissbreite endet 8 px rechts neben der Textspalte:
   Spaltenkante = 0,55 x Fensterbreite - 43 px bis 1160 px Fensterbreite, daher höchstens 45vw + 35 px (ab etwa 1167 px greift die 560 px, dort ist 45vw + 35px = 560px). So überdeckt kein Riss-SVG Text. */
@media (min-width:992px){.kontakt.dunkel{--rw:min(560px,calc(45vw + 35px));}}
/* Mobil (Louis 09.11.): kein Riss hinter Text, der mittlere Riss entfällt */
@media (max-width:991.98px){.riss-kontakt-2{display:none;}}
.kontakt.dunkel{padding-top:max(var(--abstand),calc(var(--rw) * .15 + 1rem));padding-bottom:max(var(--abstand),calc(var(--rw) * .15 + 1rem));}
/* Mobil fällt der Tropfen des oberen Risses sonst über die Überschrift: Text beginnt unter dem ganzen Riss-SVG.
   B-03: Rissfläche mobil begrenzt (--rw 220 bis 360 px statt bis 560 px, also höchstens etwa 100 px statt 154 px), damit Überschrift und
   Anrufen nach dem Sprung zu #kontakt im ersten Bildschirm liegen. Die Höhe des Rissbands (0,15 x --rw) bleibt kleiner als das Padding. */
@media (max-width:991.98px){.kontakt.dunkel{--rw:clamp(220px,40vw,360px);padding-top:calc(var(--rw) * .275 + .5rem);}}

/* Riss = gefüllte Polygone, keine Strokes */
.riss .fill{fill:#070706;}
.riss .chip{fill:#7d7c75;opacity:.55;}   /* ausgebrochene Kante, nur eine Seite */

/* Riss wächst: Clip-Rechteck läuft von links nach rechts */
.riss .reveal{transform-origin:0 0;transform:scaleX(0);animation:riss-reveal 2.8s cubic-bezier(.3,.6,.25,1) forwards;}
.riss .reveal.ast,.riss .siegel.ast{transform:scaleY(0);}
.riss .reveal.ast{animation-name:riss-reveal-ast;animation-timing-function:ease-out;}
/* Kontaktbanner liegt beim Laden außer Sicht: Wachsen, Feuchtfleck und Tropfen starten erst im Sichtbereich,
   sonst ist der Fleck vor dem Riss da */
.js .riss-kontakt:not(.riss-start) :is(.reveal,.wet,.drop){animation-play-state:paused;}
/* Risse 2 und 3 wachsen und tropfen versetzt, damit nichts im Gleichtakt läuft.
   Abzweigungen (.ast) tragen Start und Dauer als Inline-Style (scripts/rissformen.py): Sie wachsen und füllen sich,
   sobald die Front des Hauptrisses ihren Abzweigpunkt erreicht, vom Abzweigpunkt nach außen. */
.riss.riss-v2 .reveal{animation-delay:.7s;}
.riss.riss-v3 .reveal{animation-delay:1.4s;}
/* Feuchtfleck */
.riss .wet{opacity:0;animation:riss-wet 1s ease-out 1s forwards;}
/* Tropfen wächst aus der Rissspitze heraus (transform-origin = Tropfenspitze im Riss) */
/* B-08: zwei Durchläufe, danach bleibt der Tropfen unsichtbar (100 % = opacity 0, forwards); vor dem Start deckt opacity:0 die Verzögerung ab */
.riss .drop{opacity:0;fill:#7fb0d8;animation:riss-drop-out 2.2s ease-in 1.6s 2 forwards;}
/* Der Fallweg des mittleren Hero-Risses läge ab 992 px über Überschrift und Einleitung (mobil ist er ohnehin aus): kein Tropfen, Riss und Feuchtfleck bleiben */
.riss-hero-2 .drop{display:none;}
.riss.riss-pause .drop{animation-play-state:paused;}
.riss.riss-v2 .wet{animation-delay:1.7s;}
.riss.riss-v3 .wet{animation-delay:2.4s;}
.riss.riss-v2 .drop{animation-delay:2.3s;}
.riss.riss-v3 .drop{animation-delay:3s;}

/* Explizites from: WebKit interpoliert mit implizitem from (Basiswert) nicht linear (scaleX etwa t im Quadrat), das Siegel liefe der Front der Abzweige hinterher */
@keyframes riss-reveal{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes riss-reveal-ast{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes riss-wet{to{opacity:1;}}
@keyframes riss-drop-out{
	0%{transform:translateY(0) scale(.6,.3);opacity:0;}
	20%{transform:translateY(0) scale(1,1);opacity:1;}
	100%{transform:translateY(80px) scale(1,1.1);opacity:0;}
}

/* Abdichten (js/riss.js): Die Injektionsmasse startet am Berührpunkt und läuft gleich schnell nach links und rechts durch den Riss,
   an jedem Abzweigpunkt zweigt sie mit ab. Das Rechteck des Hauptsiegels setzt das Skript auf x0 - 400, Breite 800, transform-origin x0
   (Louis 09.11.); scaleX 0 bis 1 öffnet es beidseitig um x0. Ohne Skript bleibt es bei x 0 bis 400 und es gibt keine Wirkung.
   Der Riss bleibt als verfüllte Fuge sichtbar, Feuchtfleck und Tropfen verschwinden. */
.riss .material{fill:#4a4b46;}
.riss .siegel{transform-origin:0 0;transform:scaleX(0);}
.riss.ist-dicht .siegel{animation:riss-reveal 1.94s linear forwards;}
.riss.ist-dicht .siegel.ast{animation-name:riss-reveal-ast;}
.riss .nass,.riss .wasser{transition:opacity .6s ease .9s;}
.riss.ist-dicht .nass,.riss.ist-dicht .wasser{opacity:0;}
.riss-hit{fill:none;stroke:none;stroke-width:16;stroke-linejoin:round;pointer-events:none;}
.js .riss-hit{pointer-events:all;cursor:pointer;}
.js .riss.ist-dicht .riss-hit{cursor:default;}

@media (prefers-reduced-motion:reduce){
	.riss .reveal,.riss .reveal.ast{animation:none;transform:none;}
	.riss .wet{animation:none;opacity:1;}
	/* Wasser bleibt sichtbar (Louis 09.11.): Tropfen tritt langsam aus, 25 % Tempo, wie sonst zwei Durchläufe (B-08) */
	.riss .drop{animation-duration:8.8s;}
	/* transform:none zeigt das 800 breite Hauptrechteck voll (x0 +- 400 deckt 0 bis 400 ab): sofort ganz dicht */
	.riss.ist-dicht .siegel,.riss.ist-dicht .siegel.ast{animation:none;transform:none;}
	.riss .nass,.riss .wasser{transition:none;}
}