/* Kreisvisual (Codex Richtung 02): leichter Schatten der Module wie in vergleich.html.
   Die SVGs erzeugt tools/seite/kreisvisual-bauen.mjs, nicht von Hand aendern. */
.kreisvisual .kreisvisual-modul{filter:drop-shadow(0 6px 8px rgba(22,43,25,.09))}

/* Groesse und Lage. Das alte Motiv (900 x 850) durfte rechts ueber den Rand laufen; die Module
   tragen jetzt Ziffern und muessen ganz sichtbar bleiben. Diese Datei laedt nach hero-weiter.css
   und kreis-v2.css, gleiche Spezifitaet genuegt. Im SVG (600 breit) beginnt der sichtbare Ring bei
   x = 94, die Module enden rechts bei x = 491: links bleiben rund 16 % der Breite leer, rechts
   rund 18 %. Deshalb darf die Box rechts etwas ueber den Fensterrand stehen. */

/* Startseite. Die Headline "Souveraen entscheiden." ist bei 78 px rund 701 px breit, die Spalte
   700 px: ob sie auf zwei oder drei Zeilen steht, haengt an einem Pixel. Wo der Kreis naeher an
   die Copy rueckt, steht der vorhandene Umbruch nach "Souveraen" deshalb fest (hero-break),
   sonst laege der Kreis bei zwei Zeilen auf der Headline. 1100-1440 px bleibt zweizeilig, dort
   sitzt der Kreis wie bisher am rechten Rand (hero-weiter.css). */
/* 721-1099 px: Die dreizeilige Copy endet bei rund 5vw + 390 px. Der Kreis steht links davon
   ausgerichtet (Ring rund 120 px hinter der Copy), aber nie weiter rechts, als dass alle Module
   im Fenster bleiben (zweiter Wert). */
@media(min-width:641px) and (max-width:1099px){
  .sculpture-hero .sculpture-wrap{width:min(54vw,540px);right:auto;left:min(calc(5vw + 420px),calc(100% - min(54vw,540px) + 5vw))}
}
@media(min-width:1001px) and (max-width:1099px),(min-width:1441px) and (max-width:1599px){
  .sculpture-hero .hero-break{display:block}
}
@media(min-width:641px) and (max-width:860px){
  .sculpture-hero .sculpture-wrap{width:min(44vw,360px);left:min(calc(5vw + 420px),calc(100% - min(44vw,360px) + 4vw))}
}
@media(min-width:641px) and (max-width:720px){
  .sculpture-hero .sculpture-wrap{width:40vw;left:calc(66vw)}
}
/* 1441-1599 px: Copy-Spalte beginnt bei (Fenster - 1280) / 2; der Ring steht damit rund 160 px
   hinter der dreizeiligen Headline. */
@media(min-width:1441px) and (max-width:1599px){
  .sculpture-hero .sculpture-wrap{right:calc(50% - 549px)}
}
/* Ab 1600 px setzte hero-weiter.css right:calc(50% - 900px) bei 930 px Breite (altes Motiv). */
@media(min-width:1600px){
  .sculpture-hero .sculpture-wrap{width:620px;right:max(0px,calc(50% - 795px))}
}

/* Kreisseite: Die Copy laeuft bis 1200 px fast ueber die volle Breite. Dort steht der Kreis ueber
   ihr, wie kreis-v2.css es bis 760 px schon macht (padding-top am Grid, Verlauf von unten). */
/* Ab 1201 px (Codex 29.09.): Der Kreis steht im freien Teil rechts neben der Copy (hoechstens
   790 px), 32 px von ihr entfernt, und schliesst rechts mit dem zentrierten Inhaltsbereich (.wrap)
   ab; zum Fensterrand bleibt der Seitenrand. Die sichtbare Ellipse ist 412 von 600 Einheiten
   breit (.6867), um die Mitte der Box. So waechst er stetig bis 1440 px und bleibt danach gleich
   gross; frueher sprang er bei 1439/1440 und lief ab 1600 px rechts aus dem Inhaltsbereich. */
@media(min-width:1201px){
  .kv-hero .sculpture-wrap{
    --kv-inhalt:min(100% - var(--gutter) * 2, var(--page-width));
    --kv-frei:calc(var(--kv-inhalt) - 790px - 32px);
    width:calc(var(--kv-frei) / .6867);
    left:calc((100% - var(--kv-inhalt)) / 2 + 822px + var(--kv-frei) / 2 - var(--kv-frei) / .6867 / 2);
    right:auto;
  }
}
@media(max-width:1200px){
  .kv-hero{min-height:0}
  .kv-hero-grid{min-height:0;padding-block:370px 60px}
  /* Mitte des Kreises auf der Mitte des Copy-Blocks (.kv-hero-copy: links 5vw, Breite
     min(790px, 100% - 10vw)), nicht der Fenstermitte (Codex, 27.09.). */
  .kv-hero .sculpture-wrap{width:400px;left:calc(5vw + min(790px, 100% - 10vw) / 2 - 200px);right:auto;top:0;transform:none}
  .kv-hero .hero-landscape:after{background:linear-gradient(0deg,#f7f7f4 40%,#f7f7f400 80%)}
}
@media(max-width:760px){
  /* Die Regel oben laedt nach kreis-v2.css und wuerde dessen Mobilwerte ueberschreiben. */
  .kv-hero-grid{padding-block:250px 55px}
  .kv-hero .sculpture-wrap{width:min(78vw,310px);left:calc(50% - min(39vw,155px));right:auto;top:-20px}
}
@media(max-width:390px){.kv-hero-grid{padding-top:265px}}

/* Lesbarkeit: Die Ziffern (10 SVG-Einheiten) waeren bei schmalem Motiv nur rund 6 px hoch. */
@media(max-width:1200px){
  .kreisvisual .kreisvisual-ziffer{font-size:16px}
  .kreisvisual .kreisvisual-mitte{font-size:14px}
}
@media(max-width:760px){
  .kreisvisual .kreisvisual-ziffer{font-size:21px}
  .kreisvisual .kreisvisual-mitte{font-size:20px}
  /* Die Zeilen liegen im SVG 18 Einheiten auseinander, fuer 11er-Schrift; bei 20 auseinanderruecken. */
  .kreisvisual .kreisvisual-mitte-oben{transform:translateY(-6px)}
  .kreisvisual .kreisvisual-mitte-unten{transform:translateY(6px)}
}
@media(min-width:761px) and (max-width:1200px){
  .kreisvisual .kreisvisual-mitte-oben{transform:translateY(-2px)}
  .kreisvisual .kreisvisual-mitte-unten{transform:translateY(2px)}
}

/* Kreisseite 761-1200 px (Codex 29.09.): kein Sprung am Breakpoint 760/761. Die Box waechst von
   310 px (Mobilwert bei 760 px) stetig bis 400 px (ab rund 1000 px, wie bisher); Abstand ueber
   der Copy, Versatz nach oben und Schriftgroessen im SVG laufen im selben Mass von den Mobil- zu
   den bisherigen Desktopwerten. Die Startseite ist davon nicht betroffen. */
@media(min-width:761px) and (max-width:1200px){
  .kv-hero{--kv-b:clamp(310px, 310px + (100vw - 761px) * .375, 400px)}
  .kv-hero-grid{padding-block:calc(250px + (var(--kv-b) - 310px) * 4 / 3) 60px}
  .kv-hero .sculpture-wrap{width:var(--kv-b);left:calc(5vw + min(790px, 100% - 10vw) / 2 - var(--kv-b) / 2);top:calc((var(--kv-b) - 400px) * 2 / 9)}
  .kv-hero .kreisvisual .kreisvisual-ziffer{font-size:calc(21px - (var(--kv-b) - 310px) / 18)}
  .kv-hero .kreisvisual .kreisvisual-mitte{font-size:calc(20px - (var(--kv-b) - 310px) / 15)}
  .kv-hero .kreisvisual .kreisvisual-mitte-oben{transform:translateY(calc((var(--kv-b) - 310px) * 2 / 45 - 6px))}
  .kv-hero .kreisvisual .kreisvisual-mitte-unten{transform:translateY(calc(6px - (var(--kv-b) - 310px) * 2 / 45))}
}

/* Kreisseite 1201-1439 px: Der Kreis ist dort kleiner (frei 259 bis 458 px), die Ziffern waeren
   sonst nur rund 7 px hoch. Schrift und Zeilenabstand der Mitte laufen zu den Werten ab 1440 px
   (10 / 11 Einheiten, kein Versatz). --kv-frei taugt hier nicht: Sein 100% wuerde in font-size als
   Schriftgroesse gelesen. Deshalb dieselbe Rechnung mit 100vw. */
@media(min-width:1201px) and (max-width:1439px){
  .kv-hero .kreisvisual{--kv-frei:calc(min(100vw - var(--gutter) * 2, var(--page-width)) - 822px)}
  .kv-hero .kreisvisual .kreisvisual-ziffer{font-size:calc(19px - (var(--kv-frei) - 259px) * 9 / 199)}
  .kv-hero .kreisvisual .kreisvisual-mitte{font-size:calc(15px - (var(--kv-frei) - 259px) * 4 / 199)}
  .kv-hero .kreisvisual .kreisvisual-mitte-oben{transform:translateY(calc((var(--kv-frei) - 259px) * 3 / 199 - 3px))}
  .kv-hero .kreisvisual .kreisvisual-mitte-unten{transform:translateY(calc(3px - (var(--kv-frei) - 259px) * 3 / 199))}
}