/* ==========================================================================
   Erfolg beginnt im Kopf · Stylesheet für Contao 5.7
   Der UnternehmensBUTLER
   Farben, Schriften und Aufbau nach der bisherigen Seite, leicht optimiert.
   ========================================================================== */

/* ---------- Schriften (lokal, keine Google Verbindung, kein Cookie Banner nötig) ---------- */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ubuntu-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ubuntu-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/josefin-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/josefin-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Comic Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/comic-neue-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Comic Neue';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/comic-neue-latin-700-normal.woff2') format('woff2')}

/* ---------- Farben und Grundwerte ---------- */
:root{
  --orange:#FF6100;        /* Menü, Überschriften Seitenleiste */
  --orange-2:#FF6100;      /* früher blasses Orange, jetzt überall das kräftige */
  --orange-dunkel:#C94D00; /* Link beim Darüberfahren */
  --orange-hell:#FFF6EE;   /* Kästen */
  --orange-rand:#F8C9A8;
  --text:#555555;
  --text-dunkel:#3A3A3A;
  --linie:#E5E5E5;
  --grund:#F3F3F3;
  --weiss:#FFFFFF;
  --fuss:#252525;
  --fuss-unten:#1C1C1C;
  --breite:1200px;
  --schrift:'Ubuntu',system-ui,sans-serif;
  --schrift-titel:'Josefin Sans',system-ui,sans-serif;
  --schrift-comic:'Comic Neue','Comic Sans MS',cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:16px;line-height:1.7}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--orange)}
a:hover,a:focus{color:var(--orange-dunkel)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
p{margin:0 0 1em}
.invisible{display:none !important}

/* ---------- Grundgerüst ---------- */
#wrapper{min-height:100vh;display:flex;flex-direction:column}
#header{background:var(--weiss);box-shadow:0 1px 0 var(--linie)}
#header > .inside{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:var(--breite);margin:0 auto;padding:0 20px}
#container{width:100%;max-width:var(--breite);margin:0 auto 56px;padding:0 20px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);flex:1 0 auto}
#main,#right{background:var(--weiss)}
#main > .inside{padding:56px 48px}
#right{border-left:1px solid var(--linie)}
#right > .inside{padding:48px 28px;display:flex;flex-direction:column;gap:22px}
#footer{background:var(--fuss);color:rgba(255,255,255,.75);font-size:15px}
#footer > .inside{max-width:var(--breite);margin:0 auto;padding:0 20px}

/* ---------- Kopfzeile: Logo, Menü, Titelbild ---------- */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:92px;flex:1 1 auto}
.kopf .logo{display:block;line-height:0}
.kopf .logo img{height:72px;width:auto}
.menuknopf{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;padding:0;border:0;background:var(--orange);color:#fff;cursor:pointer;font-size:0;line-height:0}
.menuknopf span{display:block;width:24px;height:3px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
body.menu-offen .menuknopf span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-offen .menuknopf span:nth-child(2){opacity:0}
body.menu-offen .menuknopf span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

#hauptmenue{flex:0 1 auto}
#hauptmenue ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:flex-end}
#hauptmenue a,#hauptmenue strong{display:block;font-family:var(--schrift-titel);font-weight:400;font-size:16px;color:var(--text);text-decoration:none;padding:8px 2px;border-bottom:2px solid transparent}
#hauptmenue a:hover,#hauptmenue a:focus{color:var(--orange);border-bottom-color:var(--orange)}
#hauptmenue .active,#hauptmenue .trail{color:var(--orange);border-bottom-color:var(--orange)}
#hauptmenue .invisible{display:none}
#hauptmenue a[href*="shop."],#hauptmenue .shop > a{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:0}
#hauptmenue a[href*="shop."]::before,#hauptmenue .shop > a::before{content:"";display:block;width:24px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20l-2.2 11.2a1.5 1.5 0 0 1-1.5 1.3H5.7a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M7 8l4-6M17 8l-4-6M8 12v5M12 12v5M16 12v5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20l-2.2 11.2a1.5 1.5 0 0 1-1.5 1.3H5.7a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M7 8l4-6M17 8l-4-6M8 12v5M12 12v5M16 12v5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Titelbild über die volle Breite */
.titelbild-bereich{flex:1 0 100%;margin:0 -20px;width:calc(100% + 40px);line-height:0}
.titelbild-bereich .mod_article{margin:0}
.titelbild-bereich img{display:block;width:100%;max-height:460px;object-fit:cover}
.titelbild-bereich figure{margin:0}

/* ---------- Inhalte ---------- */
#main :is(h1,h2,h3,h4,h5,h6){color:var(--orange);line-height:1.25;margin:0 0 .6em;letter-spacing:0}
#main :is(h1,h2){font-family:var(--schrift-titel);font-weight:400;letter-spacing:.5px}
#main :is(h3,h4,h5,h6){font-family:var(--schrift-comic);font-weight:700}
#main h1{font-size:36px}
#main h2{font-size:28px}
#main h3{font-size:21px}
#main h4{font-size:19px}
#main :is(h5,h6){font-size:18px}
#main :is(.mod_eventreader,.mod_newsreader) h1{font-size:28px;line-height:1.3}
#main :is(h1,h2,h3,h4,h5,h6) a{color:inherit;text-decoration:none}
#main :is(h1,h2,h3,h4,h5,h6) a:hover{color:var(--orange-dunkel)}
#main .mod_article{margin-bottom:24px}

/* Fließtext der Inhaltsseiten in der gewohnten Comicschrift */
#main .content-text,#main .ce_text{font-family:var(--schrift-comic);font-size:17px;line-height:1.75}
#main .content-text,#main .ce_text,#main .content-image,#main .ce_image,#main .content-downloads,#main .ce_downloads,#main .content-hyperlink,#main .ce_hyperlink{margin-bottom:28px}

/* Bilder in Texten */
.content-text figure,.ce_text figure,.content-image figure,.ce_image figure{margin:0 0 1em}
.media--left > figure,.ce_text .float_left{float:left;margin:0 24px 12px 0;max-width:45%}
.media--right > figure,.ce_text .float_right{float:right;margin:0 0 12px 24px;max-width:45%}
.content-text::after,.ce_text::after{content:"";display:block;clear:both}

/* Startseite: zentrierter Einstieg "Ich kann helfen, wenn ..." */
.startseite #main .content-text,.startseite #main .ce_text{text-align:center}

/* Angebotsseiten: Bild links, Text rechts, wie die alte Rasterzeile */
#main .bild-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
#main .bild-text > figure,#main .bild-text .image_container,#main .bild-text .media--left > figure{float:none !important;max-width:100% !important;margin:0 !important}
#main .bild-text img{display:block;width:100%;height:auto}
#main .bild-text::after{display:none}

/* Kasten (Telefon, Förderhinweis) */
.kasten{background:var(--orange-hell);border:1px solid var(--orange-rand);padding:24px}
.kasten h3,.kasten .content-headline{margin-top:0}
#right .kasten{padding:18px;font-size:15px;line-height:1.6}
#main .kasten{text-align:center}
#main .kasten figure,#main .kasten .media--left > figure,#main .kasten .float_left{float:none !important;max-width:100% !important;margin:0 auto 18px !important;text-align:center}
#main .kasten img{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
#right .kasten h3{font-family:var(--schrift-titel);font-weight:400;font-size:18px;color:var(--orange);margin:0 0 6px}

/* Leadtext */
.leadtext{font-size:20px;text-align:center}
.zentriert{text-align:center}
.zentriert img{margin:0 auto;display:block}

/* Zeitleiste "Mein Werdegang" */
/* Zeitleiste "Mein Werdegang": Linie in der Mitte, Stationen abwechselnd links und rechts */
#main .zeitleiste{position:relative;width:50%;margin:0 !important;padding:0 64px 34px 0;text-align:right;border-right:2px solid #9A9A9A;font-family:var(--schrift);font-size:17px;line-height:1.6}
#main .zeitleiste:nth-child(even){margin-left:50% !important;margin-right:0 !important;padding:0 0 34px 64px;text-align:left;border-right:0;border-left:2px solid #9A9A9A;left:-2px}
#main .zeitleiste::before{content:"";position:absolute;top:14px;right:-9px;width:16px;height:16px;border-radius:50%;background:#9A9A9A}
#main .zeitleiste:nth-child(even)::before{right:auto;left:-9px}
#main .zeitleiste::after{content:"";position:absolute;top:21px;right:0;width:64px;height:2px;background:#9A9A9A}
#main .zeitleiste:nth-child(even)::after{right:auto;left:0}
#main .zeitleiste h3{display:inline-block;margin:0 0 10px !important;padding:3px 14px;background:var(--orange);color:#fff;font-family:var(--schrift);font-weight:700;font-size:18px !important;line-height:1.4}
#main .zeitleiste p{margin:0}
#main .zeitleiste:not(:has(h3))::after{display:none}
#main .zeitleiste .rte,#main .zeitleiste p{color:var(--text)}

/* Kundenmeinungen */
#main .zitat{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-items:start;background:var(--orange-hell);border:1px solid var(--orange-rand);border-radius:18px;padding:22px 26px;margin-bottom:22px !important;position:relative}
#main .zitat > :is(h1,h2,h3,h4){grid-column:1 / -1}
#main .zitat > figure,#main .zitat .media--left > figure{grid-column:1;float:none !important;margin:0 !important;max-width:64px !important}
#main .zitat > .rte,#main .zitat > div:not(figure){grid-column:2}
#main .zitat::after{display:none}
.zitat img{border-radius:50%;width:64px;height:64px;object-fit:cover}
#main .zitat h3{font-size:16px !important;font-family:var(--schrift);color:var(--text-dunkel) !important;margin:6px 0 8px !important}
.zitat .rte,.zitat p{font-style:italic}

/* Knöpfe mit orangem Rahmen (Seitenleiste) */
.knopf-rahmen a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border:2px solid var(--orange-2);color:var(--orange-2);font-weight:700;text-decoration:none;text-align:center;transition:background .15s,color .15s}
.knopf-rahmen a:hover,.knopf-rahmen a:focus{background:var(--orange-2);color:#fff}

/* Linkknopf allgemein (z. B. 404 Seite) */
#main .content-hyperlink a,#main .ce_hyperlink a{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;background:var(--orange-2);color:#fff;font-weight:700;text-decoration:none}
#main .content-hyperlink a:hover,#main .ce_hyperlink a:hover{background:var(--orange-dunkel)}

/* ---------- Seitenleiste ---------- */
#right .mod_article{display:flex;flex-direction:column;gap:14px}
#right .zentriert{font-family:var(--schrift-titel);color:var(--orange);font-size:18px;line-height:1.5}
#right .zentriert p{margin:0}
/* Motto oben in der Seitenleiste: LERNEN und SPASS machen als Überschrift, kann darf soll dazwischen */
#right .zentriert :is(h1,h2,h3){font-family:var(--schrift-titel);font-weight:400;color:var(--orange);font-size:30px;line-height:1.15;margin:0;letter-spacing:.5px}
#right .zentriert:has(h1,h2,h3) p{font-family:var(--schrift-titel);color:var(--text);font-size:22px;line-height:1.3;margin:4px 0}
#right .zentriert:has(img[src*="Unterschrift"]){margin-top:-12px;padding-bottom:22px;border-bottom:1px solid var(--linie)}
#right .zentriert:has(img[src*="Unterschrift"]) img{width:170px}
#right .bild-oval{align-self:center;width:100%;max-width:280px}
#right .bild-oval a,#right .zentriert a:has(img){display:block;transition:opacity .15s}
#right .bild-oval a:hover,#right .zentriert a:has(img):hover{opacity:.85}
#right .bild-oval img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:50%;border:4px solid var(--linie)}
#right figure{margin:0}

/* Facebook und Instagram in der Seitenleiste (Textelement mit CSS Klasse "social") */
.social .rte,.social{text-align:center}
.social p{display:flex;justify-content:center;gap:8px;margin:0;padding:12px 0;background:var(--grund)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#E9E9E9;color:transparent;font-size:0;line-height:0;overflow:hidden;transition:background .15s}
.social a:hover,.social a:focus{background:var(--orange)}
.social a::before{content:"";display:block;width:20px;height:20px;background:#555}
.social a:hover::before,.social a:focus::before{background:#fff}
.social a[href*="facebook"]::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.social a[href*="instagram"]::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}

/* Besucherzähler */
.mod_visitors{border-top:1px solid var(--linie);padding-top:20px;text-align:center}
.besucher-titel{font-family:var(--schrift-titel);text-transform:uppercase;letter-spacing:1.5px;font-size:15px;margin:0 0 10px}
.besucher-ziffern{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.besucher-ziffern span{display:flex;align-items:center;justify-content:center;width:34px;height:44px;background:var(--orange-hell);border:2px solid var(--orange-2);border-radius:8px;font-family:var(--schrift-comic);font-size:26px;font-weight:700;color:var(--orange-2)}
.besucher-ziffern span.trenner{width:auto;border:0;background:none;padding:0 1px}
.besucher-danke{font-family:var(--schrift-comic);margin:10px 0 0}

/* ---------- Blog ---------- */
.mod_newslist .blog-zeile{position:relative;display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px;align-items:start;padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid var(--linie)}
.mod_newslist .blog-zeile > figure{margin:0;grid-column:1}
.mod_newslist .blog-zeile img{display:block;width:210px;height:104px;object-fit:cover;border-radius:8px}
.mod_newslist .blog-text{grid-column:2;padding-top:6px}
.blog-unter{margin:0 0 4px;font-family:var(--schrift);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.3px;color:var(--orange)}
#main .mod_newslist .blog-titel{margin:0 0 14px !important;font-family:var(--schrift-titel);font-weight:700;font-size:19px !important;line-height:1.35;text-transform:uppercase;letter-spacing:.8px;color:var(--text)}
#main .mod_newslist .blog-titel a{color:var(--text)}
#main .mod_newslist .blog-zeile:hover .blog-titel a,#main .mod_newslist .blog-titel a:focus{color:var(--orange)}
.mod_newslist .blog-titel a::after{content:"";position:absolute;inset:0}
.mod_newslist .info{font-size:15px;color:#8A8A8A;font-family:var(--schrift);margin:0}
.mod_newslist .more a{font-weight:700;text-decoration:none}
.pagination ul{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination strong{display:block;min-width:40px;padding:8px 12px;border:2px solid var(--orange-2);text-align:center;text-decoration:none}
.pagination strong{background:var(--orange-2);color:#fff}
.mod_newsreader .info{font-size:14px;color:#777}
.mod_eventreader .info,.mod_eventreader p.info{color:#999;font-size:16px;border-left:1px solid #DDD;padding-left:24px;margin:0 0 40px}
.mod_eventreader .back a,.mod_newsreader .back a{text-decoration:none}

/* ---------- Termine ---------- */
.mod_eventlist .termin-zeile{position:relative;display:grid;grid-template-columns:110px 200px minmax(0,1fr);align-items:center;min-height:96px;margin-bottom:10px;background:#666666;color:#fff;transition:background .15s}
.mod_eventlist .termin-zeile:hover,.mod_eventlist .termin-zeile:focus-within{background:#555555}
.termin-icon{align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--orange);color:#fff}
.termin-datum{display:flex;flex-direction:column;gap:6px;padding:18px 16px 18px 44px;font-size:14px;line-height:1.3}
.termin-bis{opacity:.95}
#main .termin-titel{margin:0 !important;padding:18px 28px 18px 0;font-family:var(--schrift);font-weight:400;font-size:17px !important;line-height:1.5;color:#fff;letter-spacing:0}
#main .termin-titel a{color:#fff;text-decoration:none}
.termin-titel a::after{content:"";position:absolute;inset:0}
.termin-zeile:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.mod_eventlist .header{display:none}
.mod_eventlist .empty{font-family:var(--schrift-comic);font-size:19px}

/* ---------- Fußzeile ---------- */
.fuss-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:56px 0 48px}
@media (max-width:1100px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Social Media in der Fusszeile */
#footer .social,#footer .social .rte{text-align:left}
#footer .social p{justify-content:flex-start;background:transparent;padding:6px 0 0}
#footer .social a{background:rgba(255,255,255,.1)}
#footer .social a::before{background:#fff}
#footer .social a:hover,#footer .social a:focus{background:var(--orange)}
#footer h2,#footer h3,#footer .content-headline{font-family:var(--schrift-titel);font-weight:400;font-size:22px;color:#fff;margin:0 0 12px}
#footer a{color:rgba(255,255,255,.75);text-decoration:none}
#footer a:hover,#footer a:focus{color:#fff}
#footer strong{color:#fff}
#footer span[style],#footer [class*="font-size-"]{font-size:inherit !important}
#footer .mod_article{margin:0}
#footer .content-text,#footer .ce_text{margin-bottom:10px}
#footer ul{list-style:none;margin:0;padding:0}
#footer li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:0 -20px;padding:18px 20px;background:var(--fuss-unten);font-size:14px}
.fuss-unten p{margin:0}
.fuss-unten .rechtliches a{margin-left:18px}

/* ---------- Handy und Tablet ---------- */
@media (max-width:900px){
  #header .menuknopf{display:flex !important;position:relative;z-index:5}
  #header:not(:has(.menuknopf)) #hauptmenue{display:block}
  #hauptmenue{display:none;flex:1 0 100%;order:2;padding:0 0 16px}
  body.menu-offen #hauptmenue{display:block}
  #hauptmenue ul{flex-direction:column;gap:0}
  #hauptmenue a,#hauptmenue strong{padding:13px 0;border-bottom:1px solid #EEEEEE}
  .titelbild-bereich{order:3}
  #container{grid-template-columns:1fr;padding:0 14px}
  #main > .inside{padding:36px 18px}
  #right{border-left:0;border-top:1px solid var(--linie)}
  #main h1{font-size:29px}
  #main h2{font-size:24px}
  #main h3{font-size:19px}
  #main h4{font-size:18px}
  .mod_newslist .blog-zeile{grid-template-columns:1fr;gap:14px}
  .mod_newslist .blog-zeile > figure,.mod_newslist .blog-text{grid-column:1}
  .mod_newslist .blog-zeile img{width:100%;height:auto;aspect-ratio:2/1}
  #main .zeitleiste,#main .zeitleiste:nth-child(even){width:auto;margin-left:10px !important;left:0;padding:0 0 28px 44px;text-align:left;border-right:0;border-left:2px solid #9A9A9A}
  #main .zeitleiste::before,#main .zeitleiste:nth-child(even)::before{right:auto;left:-9px}
  #main .zeitleiste::after,#main .zeitleiste:nth-child(even)::after{right:auto;left:0;width:44px}
  #main .bild-text{grid-template-columns:1fr;gap:18px}
  .mod_eventlist .termin-zeile{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto}
  .termin-icon{grid-row:span 2}
  .termin-icon svg{width:32px;height:32px}
  .termin-datum{flex-direction:row;flex-wrap:wrap;gap:6px;padding:16px 16px 0 18px;font-size:15px}
  #main .termin-titel{padding:4px 16px 14px 18px;font-size:16px !important;line-height:1.4}
  .fuss-raster{grid-template-columns:1fr;gap:28px}

  .media--left > figure,.media--right > figure,.ce_text .float_left,.ce_text .float_right{float:none;margin:0 0 12px;max-width:100%}
}
@media (max-width:480px){
  .kopf .logo img{height:60px}
  #main .content-text,#main .ce_text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}