/* Bildungszentrum Bevier – Design der Webseite (2026-11-13, Nachbau des Originals von 2018, dazu Handy-Ansicht).
   Gehört zum Webseiten-Renderer tools\cockpit\web\website_render.js (Klassen ws-), Inhalte aus dem Funnel-Builder (f-).
   Farben und Maße aus der alten Seite gemessen: Türkis #079B9D, Boxfläche #7CC0DF, Radien 10 px, Schatten wie früher. */
@font-face{font-family:"Bevier-Text";src:url(schrift/bevier-text.woff2) format("woff2"),url(schrift/bevier-text.woff) format("woff");font-display:swap}
@font-face{font-family:"New-Text";src:url(schrift/new-text.ttf) format("truetype");font-display:swap}
:root{--ws-tuerkis:#079b9d;--ws-flaeche:#7cc0df;--ws-text:#000;--ws-grau:#383e42;--ws-schatten:3px 3px 3px 1px rgba(0,0,0,.85),inset -1px -1px 2px #bfbfbf;
  --ws-titelschrift:"Bevier-Text",Arial,"Trebuchet MS",Helvetica,sans-serif;--ws-textschrift:"New-Text","Bevier-Text",Arial,"Trebuchet MS",Helvetica,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ws{margin:0;color:var(--ws-text);font-family:var(--ws-titelschrift);font-size:15.2px;background:#fff url(bilder/hintergrund.webp) repeat-x 0 100px;background-attachment:fixed;text-align:center}
.ws a{color:inherit}
.ws img{max-width:100%;height:auto}
.ws-seite{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Kopf ---------- */
.ws-kopf{position:relative;height:100px;background:url(bilder/himmel.webp) no-repeat 0 0/auto 100px;display:flex;align-items:flex-start;justify-content:space-between;text-align:left}
.ws-logo{display:block;height:100px;flex:0 0 auto}
.ws-logo img{height:100px;width:auto;display:block}
.ws-kopf-rechts{display:flex;align-items:flex-start;gap:8px;padding:0 8px 0 0}
.ws-adresse p{margin:0;font-size:13px;line-height:17px;text-shadow:2px 2px 3px #383e42;white-space:nowrap}
.ws-adresse .ws-a-name{font-size:18px;font-weight:700;line-height:24px;padding-top:5px}
.ws-adresse b{font-family:Arial,sans-serif}
.ws-adresse a{text-decoration:none}
.ws-sym{width:16px;height:16px;vertical-align:-3px}
.ws-kopf-social{display:grid;grid-template-columns:repeat(2,18px);gap:2px;padding-top:4px}
.ws-kopf-social a{display:block;width:18px;height:18px}
.ws-kopf-social img{width:16px;height:16px;margin:1px;display:block}
.ws-handy-tel,.ws-burger{display:none}

/* ---------- Hauptmenü (runde Knöpfe mit Symbol, Text erscheint beim Darüberfahren) ---------- */
.ws-menue{height:50px;background:linear-gradient(var(--ws-tuerkis) 0%,var(--ws-tuerkis) 50%,transparent 100%) no-repeat 0 0/100% 50px;position:relative;z-index:5}
.ws-menue>ul{list-style:none;margin:0 auto;padding:0 270px 0 100px;display:flex;gap:40px;height:50px;max-width:1500px}
.ws-m{position:relative}
.ws-m.rechts{margin-left:auto}
.ws-m-a{display:block;width:100px;height:52px;text-decoration:none;color:#000;font-weight:700;font-size:16.7px;text-shadow:1px 1px 1px #383e42}
.ws-m-ico{display:block;width:50px;height:50px;margin:0 auto;background:url(menue/knopf.png) center/contain no-repeat;filter:drop-shadow(1px 1px 2px #000);transition:transform .2s}
.ws-m-ico img{width:25px;height:25px;margin:12.5px;display:block}
.ws-m-t{position:absolute;left:0;right:0;top:56px;opacity:0;visibility:hidden;transition:opacity .2s,top .2s;white-space:nowrap}
.ws-m-a:hover .ws-m-ico,.ws-m-a:focus-visible .ws-m-ico{transform:scale(1.08)}
.ws-m-a:hover .ws-m-t,.ws-m-a:focus-visible .ws-m-t{opacity:1;visibility:visible;top:52px}
.ws-m.on .ws-m-ico{filter:drop-shadow(0 0 4px #fff) drop-shadow(1px 1px 2px #000)}
.ws-m-unter{display:none}

/* ---------- Raster: Seitenmenü | Inhalt | Seitenleiste ---------- */
.ws-raster{flex:1;display:grid;grid-template-columns:260px minmax(0,1fr) 260px;max-width:1500px;width:100%;margin:0 auto;align-items:start}
.ws-raster.ohne-links{grid-template-columns:260px minmax(0,1fr) 260px}
.ws-raster.ohne-links .ws-haupt{grid-column:2}
.ws-links{padding:0 10px 0 0;text-align:left}
.ws-haupt{padding:0 15px 0 5px;min-width:0}
.ws-rechts{padding:0 10px 0 0}

/* ---------- Boxen ---------- */
.ws-box{position:relative;margin:15px 5px}
.ws-box-titel{margin:5px 5px 0;min-height:25px;border-radius:10px 10px 0 0;background:linear-gradient(var(--ws-flaeche),#fff,var(--ws-flaeche));box-shadow:var(--ws-schatten);
  color:var(--ws-tuerkis);font-weight:700;font-size:17.5px;line-height:24px;text-decoration:underline;text-shadow:1px 1px 1px #383e42;padding:0 34px}
.ws-box-inhalt{margin:0 5px 5px;border-radius:0 0 10px 10px;background:var(--ws-flaeche);box-shadow:var(--ws-schatten);padding:5px;text-align:center;overflow:hidden}
.ws-box-r .ws-box-titel{padding-left:34px}
.ws-box-sym{position:absolute;left:0;top:-2px;width:30px;height:30px;background:url(symbole/kreis.png) center/contain no-repeat;z-index:1}
.ws-box-sym img{position:absolute;left:7px;top:5px;width:16px;height:16px}
.ws-box-aus{opacity:.45}
.ws-innen{padding:4px 6px}
.ws-innen p{margin:.3em 0}
.ws-box-hinweis{opacity:.75}
.ws-leer{padding:14px;color:#383e42;font-size:13px}

/* Inhalt aus dem Funnel-Builder an das alte Aussehen angleichen (Größen und Farben setzt jedes Element selbst) */
.ws .f-ber{background:transparent!important;padding:var(--f-ao,6px) 0 var(--f-au,6px)}
.ws .f-con{padding:0 6px;margin:0 auto}
.ws .f-el{margin-left:auto;margin-right:auto}
.ws .f-text{font-family:var(--ws-textschrift);overflow-wrap:anywhere}
.ws .f-text p{margin:0 0 .55em}
.ws .f-text p:last-child{margin-bottom:0}
.ws .f-st-titel,.ws .f-st-untertitel{font-family:var(--ws-titelschrift)}
.ws .f-st-titel{text-decoration:underline;text-shadow:1px 1px 4px #383e42}
.ws .f-st-untertitel{text-shadow:1px 1px 1px #383e42}
.ws .f-st-klein{font-family:var(--ws-titelschrift)}
.ws .f-text a{color:inherit;text-decoration:underline}
.ws .f-liste{font-family:var(--ws-textschrift);display:table;margin:.4em auto;text-align:left;font-weight:700;line-height:2}
.ws .f-liste li{gap:8px}
.ws .f-bild img{border-radius:0}
.ws .f-linie{border:0;border-top:1px solid rgba(0,0,0,.35);margin:12px 0}
.ws-tab{margin:8px auto;border-collapse:collapse;font-family:Verdana,Arial,sans-serif;font-size:14px;background:rgba(255,255,255,.35)}
.ws-tab td{border:1px solid rgba(0,0,0,.45);padding:3px 10px;text-align:left}
.ws-klein{font-size:12.2px;line-height:18px}
.ws-zeiten p{margin:.4em 0;font-family:Verdana,Arial,sans-serif;font-size:14px}

/* Kontaktblock, Social */
.ws-kontakt{font-family:var(--ws-textschrift);font-size:16.7px}
.ws-kontakt p{margin:.25em 0}
.ws-kontakt .ws-k-name{font-weight:700;font-size:22px}
.ws-kontakt .ws-k-zeilen .ws-sym{width:24px;height:24px;vertical-align:-6px}
.ws-kontakt .ws-tel{font-weight:700;font-size:22px}
.ws-kontakt a{text-decoration:none}
.ws-kontakt hr{border:0;border-top:1px solid rgba(0,0,0,.35)}
.ws-kontakt-kurz{font-size:12.2px}
.ws-kontakt-kurz .ws-k-zeilen .ws-sym{width:16px;height:16px;vertical-align:-3px}
.ws-kontakt-kurz .ws-tel{font-size:12.2px;font-weight:400}
.ws-social .ws-so{margin:6px 0}
.ws-social .ws-so p{margin:0;font-family:var(--ws-textschrift)}
.ws-social a{text-decoration:none;font-family:var(--ws-textschrift)}
.ws-social .ws-sym{margin-right:3px}
.ws-social-sym{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ws-social-sym img{width:24px;height:24px}

/* Karte erst nach Klick (keine Verbindung zu Google ohne Zustimmung) */
.ws-karte{position:relative;margin:6px auto;max-width:600px;background:#dbeef6 repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 10px,transparent 10px 20px);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px}
.ws-karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:6px}
.ws-karte-los{font:inherit;font-weight:700;background:var(--ws-tuerkis);color:#fff;border:0;border-radius:20px;padding:10px 18px;min-height:44px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ws-karte .ws-klein{background:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px}
.ws-box-r .ws-karte{max-width:200px}

/* Diashow wie früher (Bild mit Schatten, Text unten links auf grauem Band) */
.ws-dia{position:relative;max-width:620px;margin:10px auto;padding:10px;box-shadow:0 0 20px rgba(0,0,0,.4);background:#fff;aspect-ratio:620/420}
.ws-dia-b{position:absolute;inset:10px;opacity:0;transition:opacity .9s;pointer-events:none}
.ws-dia-b.on{opacity:1;pointer-events:auto}
.ws-dia-b img{width:100%;height:100%;object-fit:cover;display:block}
.ws-dia-meta{position:absolute;left:0;bottom:22px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:"Arial Black",Arial,sans-serif;color:#fff;text-shadow:1px 1px 4px #383e42}
.ws-dia-meta b,.ws-dia-meta span{background:rgba(51,51,51,.5);padding:10px 18px;font-weight:300}
.ws-dia-meta b{font-size:24px}
.ws-dia-meta span{font-size:20px}

/* Seitenmenü links */
.ws-smenue{list-style:none;margin:4px 0;padding:0 6px 4px 14px;text-align:left}
.ws-smenue li{margin:3px 0}
.ws-smenue li.ws-einzug{padding-left:22px}
.ws-smenue a{display:flex;align-items:center;gap:6px;color:var(--ws-grau);text-decoration:none;min-height:24px}
.ws-smenue img{width:16px;height:16px;flex:0 0 16px}
.ws-smenue a:hover span,.ws-smenue li.on span{text-decoration:underline;color:#000}

/* Journal */
.ws-beitrag-info{font-size:12.2px;font-style:italic;color:#383e42}
.ws-zurueck{text-align:left;margin:0 15px}
.ws-zurueck a{color:#000}

/* ---------- Fuß ---------- */
.ws-fuss{margin-top:25px;border-top:2px groove #808080;padding:5px 0 20px;font-size:12px;background:rgba(255,255,255,.6)}
.ws-f-in{display:flex;justify-content:center;flex-wrap:wrap;gap:0 50px}
.ws-f-sp{min-width:140px}
.ws-f-sp p{margin:0;line-height:18px;color:var(--ws-grau)}
.ws-f-sp .ws-f-t{font-weight:700;text-decoration:underline;color:#000}
.ws-f-sp a{color:inherit}
.ws-f-copy{margin:10px 0 0;color:var(--ws-grau)}

/* ---------- Zwischengröße ---------- */
@media (max-width:1100px){
  .ws-raster,.ws-raster.ohne-links{grid-template-columns:220px minmax(0,1fr) 220px}
  .ws-menue>ul{padding:0 230px 0 60px;gap:20px}
}
@media (max-width:999px){
  .ws-m-t{position:static;opacity:1;visibility:visible;display:block;font-size:13px}
  .ws-menue{height:auto;background-size:100% 50px}
  .ws-menue>ul{height:auto;padding:0 20px;justify-content:space-around}
  .ws-raster,.ws-raster.ohne-links{grid-template-columns:minmax(0,1fr) 240px}
  .ws-links{grid-column:1/-1;padding:0}
  .ws-raster.ohne-links .ws-haupt,.ws-haupt{grid-column:1}
  .ws-rechts{grid-column:2;grid-row:2}
  .ws-links .ws-smenue{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 8px}
}

/* ---------- Handy (Pflicht 375 px): Menü im Burger, Spalten untereinander ---------- */
@media (max-width:767px){
  body.ws{background-position:0 64px}
  .ws-kopf{height:64px;background-size:auto 64px;align-items:center;padding-right:6px}
  .ws-logo,.ws-logo img{height:64px}
  .ws-kopf-rechts{display:none}
  .ws-handy-tel{display:flex;align-items:center;gap:6px;margin-left:auto;text-decoration:none;font-weight:700;font-family:Arial,sans-serif;font-size:14px;background:rgba(255,255,255,.75);border-radius:20px;padding:0 12px;min-height:44px;color:#000}
  .ws-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:6px;border:0;border-radius:10px;background:var(--ws-tuerkis);padding:0 11px;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.3)}
  .ws-burger span{display:block;height:3px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .ws-offen .ws-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .ws-offen .ws-burger span:nth-child(2){opacity:0}
  .ws-offen .ws-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .ws-menue{height:6px;background:var(--ws-tuerkis)}
  .ws-menue>ul{display:none}
  .ws-offen .ws-menue{height:auto}
  .ws-offen .ws-menue>ul{display:block;padding:6px 10px 12px;text-align:left}
  .ws-m{border-bottom:1px solid rgba(255,255,255,.35)}
  .ws-m.rechts{margin-left:0}
  .ws .ws-m-a{display:flex;align-items:center;gap:10px;width:auto;height:auto;min-height:48px;color:#fff;text-shadow:none;font-size:17px}
  .ws-m-ico{width:40px;height:40px;margin:0;flex:0 0 40px}
  .ws-m-ico img{width:20px;height:20px;margin:10px}
  .ws-m-t{position:static;opacity:1;visibility:visible;font-size:17px}
  .ws-m-unter{display:block;list-style:none;margin:0 0 6px;padding:0 0 0 50px}
  .ws .ws-m-unter a{display:flex;align-items:center;min-height:40px;color:#fff;text-decoration:none;font-size:15px}
  .ws-raster,.ws-raster.ohne-links{display:block}
  .ws-links,.ws-haupt,.ws-rechts{padding:0}
  .ws-box{margin:12px 6px}
  .ws-box-titel{margin:4px 2px 0;font-size:16.5px;padding:0 30px}
  .ws-box-inhalt{margin:0 2px 4px}
  /* Seitenmenü am Handy: eine wischbare Zeile mit Knöpfen statt einer hohen Box (alle Punkte stehen auch im Menü oben) */
  .ws-links .ws-box{margin:8px 0 4px}
  .ws-links .ws-box-titel{display:none}
  .ws-links .ws-box-inhalt{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}
  .ws-links .ws-smenue{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:2px 8px 6px;margin:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ws-links .ws-smenue::-webkit-scrollbar{display:none}
  .ws-links .ws-smenue li{margin:0;flex:0 0 auto;padding:0}
  .ws-links .ws-smenue li.ws-einzug{padding:0}
  .ws-links .ws-smenue a{min-height:40px;padding:0 12px;border-radius:20px;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap;color:#000}
  .ws-links .ws-smenue li.on a{background:var(--ws-tuerkis);color:#fff}
  .ws-links .ws-smenue li.on span{text-decoration:none;color:#fff}
  .ws-logo{flex:0 1 auto;min-width:0}
  .ws-logo img{max-width:44vw;object-fit:contain;object-position:left center}
  .ws-handy-tel{white-space:nowrap;font-size:13px;padding:0 10px;gap:5px}
  .ws .f-zeile.f-mehr{grid-template-columns:1fr!important}
  .ws-dia{padding:6px}
  .ws-dia-b{inset:6px}
  .ws-dia-meta{bottom:10px}
  .ws-dia-meta b{font-size:15px;padding:6px 10px}
  .ws-dia-meta span{font-size:13px;padding:6px 10px}
  .ws-box-r .ws-karte{max-width:none}
  .ws-tab{font-size:13px}
  .ws-tab td{padding:4px 8px}
  .ws-kontakt .ws-k-name,.ws-kontakt .ws-tel{font-size:19px}
  .ws-f-in{flex-direction:column;gap:12px}
  .ws-fuss{font-size:13px}
  .ws-f-sp p{line-height:22px}
  .ws-f-sp a{display:inline-block;min-height:30px;line-height:30px}
}
/* Editor: Menüs nur Anzeige */
.ws-ed .ws-menue a,.ws-ed .ws-links a,.ws-ed .ws-kopf a,.ws-ed .ws-fuss a{pointer-events:none}