/* ==========================================================================
   Kreisfußballverband Mecklenburgische Seenplatte
   Aussehen der Website. Basis ist der abgenommene Entwurf, ergänzt um das,
   was Joomla an Markup mitbringt.

   Aufbau:
     1 Grundlagen      6 Laufband        11 Joomla-Beitraege
     2 Kopf und Menue  7 Inhaltsseiten   12 Meldungen und Wegweiser
     3 Zeitungsraster  8 Formulare       13 Fuss
     4 Termine         9 Einwilligung    14 Kleinere Bildschirme
     5 Tabellen       10 Bausteine       15 Drucken
   ========================================================================== */

/* 1 Grundlagen ------------------------------------------------------------ */

:root{
  --blau:#1b6fb5;          /* Traegerfarbe, aus dem Wappen */
  --blau-dunkel:#0f4d80;
  --rot:#d32b1e;           /* Akzent */
  --gelb:#f5c518;          /* Signal, sparsam */
  --ink:#141414;
  --ink2:#4a4a4e;
  --linie:#e2e2dd;
  --grund:#ffffff;
  --sand:#f6f5f1;
  --breit:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

body{margin:0;background:var(--grund);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55}

h1,h2,h3,h4,.datum,.rubrik{font-family:"Barlow Condensed",Arial Narrow,sans-serif;
  letter-spacing:.01em}

a{color:var(--blau-dunkel)}
a:hover{color:var(--rot)}
img{max-width:100%;height:auto}

.breit{max-width:var(--breit);margin:0 auto;padding:0 20px}

/* Sprungmarke fuer Tastatur und Vorlesewerkzeuge */
.zum-inhalt{position:absolute;left:-9999px;top:0;background:var(--rot);color:#fff;
  padding:10px 16px;z-index:1000;text-decoration:none}
.zum-inhalt:focus{left:0;color:#fff}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px #fff}
/* Fokus: dunkler Rahmen mit weissem Innenring. Der rote Rahmen war auf Blau kaum zu sehen. */

/* 2 Kopf und Menue -------------------------------------------------------- */

.oben{background:var(--blau-dunkel);color:#fff;font-size:14px}
.oben .breit{display:flex;justify-content:space-between;align-items:center;
  min-height:36px;gap:16px;flex-wrap:wrap}
.oben a{color:#cfe3f5;text-decoration:none;margin-left:18px}
.oben a:hover{color:#fff;text-decoration:underline}
.oben ul{list-style:none;display:flex;margin:0;padding:0}

header{border-bottom:3px solid var(--rot);background:#fff}
/* Der seitliche Abstand muss stehen bleiben, sonst steht das Logo zwanzig
   Pixel weiter links als das Menue darunter und die Flucht ist hin. */
.marke{display:flex;align-items:center;gap:16px;padding:14px 20px}
.marke img{width:72px;height:72px;flex:none}
.marke a{display:block;line-height:0}
.marke .txt strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:30px;
  line-height:1;text-transform:uppercase;font-weight:700;color:var(--ink)}
.marke .txt span{color:var(--ink2);font-size:15px}

/* Nur das Menue im Kopf, sonst faerbt die Regel auch die Brotkrumen ein,
   die Joomla ebenfalls in ein <nav> packt. */
header nav{background:var(--blau)}
header nav .breit{padding:0 20px}
header nav ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
header nav li{position:relative}
header nav a,
header nav .mod-menu__heading,
header nav li.item-header > span,
header nav li > span.separator{display:block;color:#fff;text-decoration:none;padding:13px 18px;
  font-family:"Barlow Condensed",sans-serif;font-size:19px;text-transform:uppercase}
header nav a:hover,header nav a:focus{background:var(--rot);color:#fff}
header nav .active > a,header nav .current > a{background:var(--rot)}

/* Untermenues: ausklappen beim Darueberfahren, auf Tastatur beim Fokus */
header nav ul ul{display:none;position:absolute;left:0;top:100%;z-index:60;min-width:240px;
  background:var(--blau-dunkel);flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,.22)}
header nav li:hover > ul,header nav li:focus-within > ul{display:flex}
header nav ul ul a,
header nav ul ul li > span{font-size:17px;padding:10px 16px;text-transform:none;
  border-bottom:1px solid rgba(255,255,255,.12);white-space:normal}
header nav ul ul ul{left:100%;top:0}

.menuknopf{display:none}

/* 3 Zeitungsraster -------------------------------------------------------- */

.zeitung{display:grid;grid-template-columns:1.85fr 1fr;gap:34px;margin:34px 0 10px}
.zeitung.einspaltig{grid-template-columns:1fr}

.spaltentitel{font-size:22px;text-transform:uppercase;margin:0 0 12px;
  padding-bottom:7px;border-bottom:3px solid var(--blau)}

.aufmacher img{width:100%;height:360px;object-fit:cover;display:block}
.rubrik{display:inline-block;background:var(--rot);color:#fff;font-size:15px;
  text-transform:uppercase;padding:3px 10px;margin:14px 0 8px}
.aufmacher h1,.aufmacher h2{font-size:34px;line-height:1.1;margin:0 0 10px;
  font-weight:700;text-transform:none}
.aufmacher p{margin:0;color:var(--ink2)}
.datum{color:var(--ink2);font-size:16px;text-transform:uppercase}

.weiter{list-style:none;margin:0;padding:0}
.weiter li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie)}
.weiter li:first-child{padding-top:0}
.weiter img{width:92px;height:68px;object-fit:cover;flex:none}
.weiter h3{margin:2px 0 3px;font-size:19px;line-height:1.2;font-weight:600}
.weiter a{text-decoration:none;color:var(--ink)}
.weiter a:hover{color:var(--rot)}

/* 4 Termine --------------------------------------------------------------- */

.termine{background:var(--sand);padding:26px 0;margin-top:26px}
.termine ol,.termine ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
.termine li{display:flex;gap:14px;align-items:flex-start}
.tag{background:#fff;border-left:5px solid var(--gelb);padding:7px 11px;text-align:center;flex:none}
.tag b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:26px;line-height:1}
.tag span{font-size:12px;text-transform:uppercase;color:var(--ink2)}
.termine strong{display:block;font-size:17px}
.termine em{font-style:normal;color:var(--ink2);font-size:15px}

/* 5 Tabellen und Reiter --------------------------------------------------- */

.reiter{display:flex;flex-wrap:wrap;gap:2px;margin:16px 0 0;border-bottom:3px solid var(--blau)}
.reiter button{font-family:"Barlow Condensed",sans-serif;font-size:19px;text-transform:uppercase;
  border:0;background:var(--sand);color:var(--ink2);padding:10px 16px;cursor:pointer}
.reiter button[aria-selected="true"]{background:var(--blau);color:#fff}
.reiter button:hover{background:var(--rot);color:#fff}

.tabellen{margin-top:14px}
.tabelle[hidden]{display:none}
/* Platz reservieren, damit beim Nachladen nichts springt. Das FuPa-Widget laedt
   erst, wenn sein Platz in den Sichtbereich kommt. Ohne reservierte Hoehe rueckt
   der Inhalt dem Leser um rund 500 Pixel weg. */
.tabelle > div[id^="fp-widget_root-"]{min-height:520px}
.hinweis{color:var(--ink2);font-size:15px;margin:6px 0 0}

/* 6 Laufband -------------------------------------------------------------- */

/* Der Verband wollte ausdruecklich einen Streifen mit durchlaufenden Meldungen.
   Kein Plugin, nur CSS und ein kurzes Skript, das den Inhalt einmal dupliziert,
   damit der Lauf ohne Sprung wieder von vorn beginnt. */
.laufband{background:var(--gelb);border-top:2px solid #e0b400;border-bottom:2px solid #e0b400;
  overflow:hidden;position:relative}

/* Der Streifen geht über die volle Fensterbreite, und die Marke sitzt ganz
   links am Rand. Jeder Leerraum davor sieht aus wie ein Darstellungsfehler,
   nicht wie eine Gestaltung. Ein Nachrichtenband ist durchgehend oder es ist
   kaputt, dazwischen gibt es nichts. */
.laufband .breit{display:flex;align-items:center;gap:0;
  max-width:none;padding:0}
.laufband-marke{flex:none;background:var(--rot);color:#fff;font-family:"Barlow Condensed",sans-serif;
  font-size:18px;text-transform:uppercase;padding:8px 16px;align-self:stretch;display:flex;
  align-items:center;margin:0}
/* Luft zwischen Marke und Text als Aussenabstand, nicht als Innenabstand:
   overflow:hidden schneidet erst am aeusseren Rand ab, bei padding klebte der
   angeschnittene Text sonst direkt an der roten Marke. */
.laufband-fenster{margin-left:18px}
.laufband-fenster{overflow:hidden;flex:1;position:relative}

/* Wichtig: kein gap und kein Abstand nur zwischen den Meldungen, sondern an
   jeder einzelnen. Sonst geht die Rechnung nicht auf. Die Bewegung schiebt um
   die halbe Spurbreite, und die enthält bei einem gap einen halben Zwischenraum
   mehr, als die erste Hälfte breit ist. Das Laufband springt dann bei jedem
   Durchlauf, hier waren es 47 Pixel. */
.laufband-spur{display:flex;white-space:nowrap;width:max-content;
  animation:laufband-lauf var(--dauer,40s) linear infinite;
  will-change:transform}
.laufband-spur > *{padding:9px 0;font-size:16px;flex:none}
.laufband-spur > *::after{content:"\00b7";color:#a98b00;margin:0 22px}

.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur{animation-play-state:paused}
.laufband a{color:var(--ink);text-decoration:none;font-weight:600}
.laufband a:hover{text-decoration:underline}

@keyframes laufband-lauf{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Wer Bewegung abgestellt hat, bekommt eine ruhige Liste statt eines Laufbands.
   Verdoppelt wird dann nichts, darum kümmert sich laufband.js. */
@media (prefers-reduced-motion:reduce){
  .laufband-spur{animation:none;white-space:normal;width:auto;flex-wrap:wrap}
  .laufband-spur > *::after{margin:0 14px}
}

/* 7 Inhaltsseiten --------------------------------------------------------- */

main{padding-bottom:10px}
main.mit-spalte{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
main.mit-spalte:has(.spalte.links){grid-template-columns:300px 1fr}
main.mit-spalte:has(.spalte.rechts){grid-template-columns:1fr 300px}
main.mit-spalte:has(.spalte.links):has(.spalte.rechts){grid-template-columns:280px 1fr 280px}

.inhaltsbahn{min-width:0}

.inhalt{max-width:760px;margin:34px auto 0;padding:0 20px}
h1,.inhalt h1,.com-content-article h1{font-size:34px;line-height:1.1;margin:0 0 6px;
  text-transform:uppercase}
.inhalt h2{font-size:23px;text-transform:uppercase;margin:30px 0 8px;
  padding-bottom:6px;border-bottom:2px solid var(--blau)}
.inhalt h3{font-size:19px;margin:20px 0 4px;font-weight:600}
.inhalt p,.inhalt li{color:var(--ink2)}
.inhalt p strong,.inhalt li strong{color:var(--ink)}
.inhalt ul{padding-left:20px}
.inhalt .stand{font-size:15px;color:var(--ink2);text-transform:uppercase;
  font-family:"Barlow Condensed",sans-serif;margin:0 0 22px}

.karte{background:var(--sand);border-left:5px solid var(--blau);padding:16px 20px;margin:18px 0}
.karte p{margin:0 0 4px}
.karte p:last-child{margin-bottom:0}
.pruefen{background:#fff6d6;border-left:5px solid var(--gelb);padding:14px 18px;
  margin:18px 0;font-size:15px}

/* 8 Formulare ------------------------------------------------------------- */

.formular{margin:20px 0 0}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{margin-bottom:16px}
.feld label{display:block;font-family:"Barlow Condensed",sans-serif;font-size:18px;
  text-transform:uppercase;margin-bottom:4px;color:var(--ink)}
.feld .frei{color:var(--ink2);text-transform:none;font-size:15px;
  font-family:"Source Sans 3",sans-serif}
.feld input,.feld textarea,
input[type=text],input[type=email],input[type=tel],input[type=search],
input[type=password],textarea,select{
  width:100%;font:inherit;color:var(--ink);border:1px solid #c9c9c2;background:#fff;
  padding:10px 12px;border-radius:0}
.feld input:focus,.feld textarea:focus,
input:focus,textarea:focus,select:focus{outline:2px solid var(--blau);outline-offset:0;
  border-color:var(--blau)}
.feld textarea,textarea{min-height:170px;resize:vertical}
.feld .fehler{color:var(--rot);font-size:15px;display:none;margin-top:4px}
.feld.falsch input,.feld.falsch textarea{border-color:var(--rot)}
.feld.falsch .fehler{display:block}
.pflichthinweis{font-size:15px;color:var(--ink2);margin:0 0 16px}
.falle{position:absolute;left:-9999px}   /* Honigtopf gegen Werbepost */

.knopf,.btn,button.knopf,input[type=submit],button[type=submit]{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  padding:11px 20px;font-family:"Barlow Condensed",sans-serif;font-size:19px;
  text-transform:uppercase;border:0;cursor:pointer;border-radius:0}
.knopf:hover,.btn:hover,input[type=submit]:hover,button[type=submit]:hover{
  background:var(--rot);color:#fff}
.btn-primary{background:var(--blau)}

/* 9 Einwilligung ---------------------------------------------------------- */

.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:#fff;border-top:4px solid var(--rot);box-shadow:0 -6px 24px rgba(0,0,0,.16)}
.einwilligung-inhalt{max-width:var(--breit);margin:0 auto;padding:18px 20px}
.einwilligung p{margin:0 0 8px}
.einwilligung-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.einwilligung .knopf{border:0;cursor:pointer;background:var(--blau)}
.einwilligung .knopf-still{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.dienst-gesperrt{background:var(--sand);border:1px dashed #b9b9b2;padding:20px 22px}
.dienst-gesperrt p{margin:0 0 8px;color:var(--ink2)}
.dienst-gesperrt p:first-child{color:var(--ink)}
.dienst-gesperrt .knopf{border:0;cursor:pointer;background:var(--blau)}
/* Der gesperrte Platz braucht keine 520 Pixel Reserve, der Kasten fuellt ihn selbst. */
.tabelle > div[id^="fp-widget_root-"]:has(.dienst-gesperrt){min-height:0}

/* 10 Bausteine ------------------------------------------------------------ */

.baustein{margin:0 0 34px}
.baustein:last-child{margin-bottom:0}

.liste{list-style:none;margin:0;padding:0}
.liste li{border-bottom:1px solid var(--linie)}
.liste a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;text-decoration:none;
  color:var(--ink)}
.liste a:hover{color:var(--rot)}
.liste em{font-style:normal;color:var(--ink2);font-size:14px;text-transform:uppercase}

.zweispalt{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start;margin:34px 0}

.ehrenamt{background:var(--gelb);padding:22px 24px}
.ehrenamt h3{margin:0 0 8px;font-size:26px;text-transform:uppercase}
.ehrenamt p{margin:0 0 14px}

/* 11 Joomla-Beitraege ----------------------------------------------------- */

.com-content-article,.com-content-category-blog{min-width:0}
.com-content-article__body,.com-content-category-blog__item{margin-bottom:26px}

.page-header h1,.page-header h2{font-size:30px;text-transform:uppercase;margin:0 0 6px}
.article-info{color:var(--ink2);font-size:15px;font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;margin:0 0 14px;display:flex;gap:16px;flex-wrap:wrap;padding:0}
.article-info dd{margin:0}
.article-info dt.article-info-term{position:absolute;left:-9999px}

.item-image img,.article-image img{width:100%;height:auto;display:block;margin-bottom:14px}

.blog-items{display:grid;gap:30px}
.blog-items.columns-2{grid-template-columns:1fr 1fr}
.blog-items.columns-3{grid-template-columns:repeat(3,1fr)}
.blog-item{border-bottom:1px solid var(--linie);padding-bottom:22px}
.blog-item h2,.blog-item h3{font-size:24px;line-height:1.15;margin:0 0 6px}
.blog-item h2 a,.blog-item h3 a{text-decoration:none;color:var(--ink)}
.blog-item h2 a:hover,.blog-item h3 a:hover{color:var(--rot)}

.readmore,.btn-secondary{display:inline-block;margin-top:8px;font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;text-decoration:none;color:var(--blau-dunkel);font-size:17px}
.readmore:hover{color:var(--rot)}

/* Bloecke, die Joomla in Beitragstexte einbaut */
.com-content-article blockquote{border-left:5px solid var(--blau);background:var(--sand);
  margin:18px 0;padding:14px 20px;font-style:normal}
.com-content-article table,.inhalt table{width:100%;border-collapse:collapse;margin:18px 0}
.com-content-article th,.inhalt th{background:var(--blau);color:#fff;text-align:left;
  padding:9px 12px;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:600}
.com-content-article td,.inhalt td{border-bottom:1px solid var(--linie);padding:9px 12px}

.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:26px 0 0;flex-wrap:wrap}
/* Seitennavigation: Liste (ul.pagination > li > .page-link) und Zurueck/Weiter unter
   Beitraegen (nav.pagenavigation > span.pagination > a.btn). Nur die Links selbst
   bekommen Rahmen und Flaeche, innere span-Elemente nicht (sonst Kasten im Kasten). */
.pagination .page-link,.pagination > a{display:block;padding:8px 14px;text-decoration:none;
  border:1px solid var(--linie);color:var(--ink);background:var(--grund);
  font-family:"Barlow Condensed",sans-serif;font-size:17px;text-transform:uppercase;margin:0;
  -webkit-tap-highlight-color:transparent}
.pagination .active .page-link,.pagination .page-link:hover,.pagination .page-link:focus-visible,
.pagination > a:hover,.pagination > a:focus-visible,.pagination > a:active{
  background:var(--blau);color:#fff;border-color:var(--blau)}
.pagenavigation .pagination{justify-content:space-between;gap:10px}
.pagenavigation .pagination > a{display:inline-flex;align-items:center;gap:8px}
.pagenavigation [class^="icon-"]{display:none}
.pagenavigation a.previous::before{content:"←"}
.pagenavigation a.next::after{content:"→"}
/* nur fuer Screenreader: fehlte im Template, der Text stand sichtbar im Knopf */
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.counter{color:var(--ink2);font-size:15px}

/* 12 Meldungen und Wegweiser ---------------------------------------------- */

.breadcrumb{display:flex;list-style:none;padding:0;margin:18px 0 0;gap:8px;flex-wrap:wrap;
  font-size:15px;color:var(--ink2)}
.breadcrumb a{text-decoration:none}
.breadcrumb li + li::before{content:"\203a";margin-right:8px;color:#a5a5a0}

#system-message-container{margin:18px 0 0}
.alert{border-left:5px solid var(--blau);background:var(--sand);padding:13px 18px;margin:0 0 14px}
.alert-success{border-left-color:#2e7d32;background:#eef7ee}
.alert-danger,.alert-error{border-left-color:var(--rot);background:#fdeceb}
.alert-warning{border-left-color:var(--gelb);background:#fff6d6}
.alert-heading{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;margin:0 0 4px}

/* 13 Fuss ----------------------------------------------------------------- */

footer{background:var(--ink);color:#cfcfcf;margin-top:40px;padding:34px 0 24px;font-size:15px}
footer h4{color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:20px;
  text-transform:uppercase;margin:0 0 9px}
footer a{color:#cfcfcf}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0}
.fussraster{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fussunten{border-top:1px solid #333;margin-top:22px;padding-top:14px;font-size:13px;color:#8d8d8d}
.fussunten ul{display:flex;gap:16px;flex-wrap:wrap}

/* Fehlerseite braucht keinen Abstand nach oben */
.fehlerseite main.inhalt{margin-top:34px}

/* 14 Kleinere Bildschirme ------------------------------------------------- */

/* Tablet */
@media (max-width:1024px){
  .zeitung{grid-template-columns:1fr;gap:26px}
  .aufmacher img{height:300px}
  .termine ol,.termine ul{grid-template-columns:repeat(2,1fr)}
  .weiter{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  main.mit-spalte,
  main.mit-spalte:has(.spalte.links),
  main.mit-spalte:has(.spalte.rechts),
  main.mit-spalte:has(.spalte.links):has(.spalte.rechts){grid-template-columns:1fr}
  .blog-items.columns-3{grid-template-columns:1fr 1fr}
}

/* Menü: Die sieben Punkte brauchen nebeneinander rund 815 Pixel. Darunter bricht
   die Leiste um und ein einzelner Punkt steht allein in der zweiten Zeile. Das
   sieht aus wie ein Fehler. Deshalb wird sie ab 1024 Pixel schmaler gesetzt und
   klappt ab 780 Pixel ganz zusammen. */
@media (max-width:1024px){
  header nav a,
  header nav .mod-menu__heading,
  header nav li.item-header > span,
  header nav li > span.separator{padding:12px 12px;font-size:17px}
}

/* Klappmenü, sobald die Leiste nicht mehr in eine Zeile passt. Auf einem
   Tablet im Hochformat ist das der Normalfall. */
@media (max-width:780px){
  .menuknopf{display:block;width:100%;background:var(--blau);color:#fff;border:0;
    font-family:"Barlow Condensed",sans-serif;font-size:20px;text-transform:uppercase;
    padding:13px 0;text-align:left;cursor:pointer}
  .menuknopf::after{content:"\25be";float:right}
  .menuknopf[aria-expanded="true"]::after{content:"\25b4"}
  #hauptmenue{display:none}
  #hauptmenue.offen{display:block}
  header nav ul{flex-direction:column}
  header nav a,header nav li > span{padding:12px 0;border-top:1px solid rgba(255,255,255,.18)}
  header nav ul ul{position:static;display:block;box-shadow:none;background:transparent;
    min-width:0}
  header nav ul ul a,header nav ul ul li > span{padding-left:18px}
}

/* Handy */
@media (max-width:640px){
  body{font-size:16px}
  .oben{display:none}
  .marke img{width:56px;height:56px}
  .marke .txt strong{font-size:23px}

  .aufmacher img{height:210px}
  .aufmacher h2{font-size:26px}
  .inhalt h1,h1{font-size:27px}
  .termine ol,.termine ul,.zweispalt,.weiter,.fussraster,
  .blog-items.columns-2,.blog-items.columns-3{grid-template-columns:1fr;display:grid}
  .zweispalt{gap:24px}
  .feldpaar{grid-template-columns:1fr;gap:0}
  .laufband-marke{font-size:15px;padding:8px 10px}
  .reiter{overflow-x:auto;flex-wrap:nowrap}
  .reiter button{white-space:nowrap}
}

/* 15 Drucken -------------------------------------------------------------- */

@media print{
  .oben,nav,.laufband,.einwilligung,footer,.zum-inhalt,.reiter{display:none}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:none}
  .breit{max-width:none;padding:0}
}

/* 16 Nachbesserungen nach der ersten Sichtprüfung ------------------------- */

/* Überschriften sind Verweise, sollen aber nicht wie Verweise aussehen.
   Unterstrichene Schlagzeilen wirken wie eine Linkliste, nicht wie eine Zeitung. */
.aufmacher h1 a,.aufmacher h2 a,.weiter h3 a,.blog-item h3 a,.blog-item h2 a,
.spaltentitel a,.page-header h1 a,.page-header h2 a{text-decoration:none;color:var(--ink)}
.aufmacher h1 a:hover,.aufmacher h2 a:hover,.weiter h3 a:hover,.blog-item h3 a:hover{color:var(--rot)}

/* Gleiche Bildhöhe im Raster, sonst tanzen die Kacheln. */
.blog-item img{width:100%;height:190px;object-fit:cover;display:block;margin-bottom:10px}
.blog-item{display:flex;flex-direction:column}
.blog-item .datum{margin-top:auto}

/* Auf der Startseite braucht niemand den Hinweis, dass er auf der Startseite ist. */
.ist-startseite .breadcrumb,
.ist-startseite .mod-breadcrumbs__wrapper{display:none}

/* Das Beitragsbild in der Vollansicht nicht über die ganze Höhe ziehen. */
.com-content-article .item-image img{max-height:460px;object-fit:cover}

/* 17 Kategorieübersicht ---------------------------------------------------- */

.kategoriebeschreibung{color:var(--ink2);margin:0 0 24px}
.blog-item .anriss{color:var(--ink2);font-size:16px;margin:6px 0 8px}
.blog-item .datum{margin:0 0 4px}

/* Nur für Vorleseprogramme: steht im Quelltext, ist aber nicht zu sehen.
   So heißt jeder Weiterlesen-Verweis für Blinde anders, ohne dass auf der
   Seite zwanzigmal die volle Überschrift als Schaltfläche steht. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Termintitel sind Verweise, sollen aber nicht unterstrichen sein. */
.termine strong a{text-decoration:none;color:var(--ink)}
.termine strong a:hover{color:var(--rot)}

/* Auf einem Einzelbeitrag steht der Kategoriename schon in den Brotkrumen.
   Joomla setzt ihn trotzdem als Seitenüberschrift über den Beitragstitel, weil
   sich beide Ansichten denselben Menüpunkt teilen. Hier weg damit. */
/* Der Terminstreifen sitzt im Startseitenlayout, also innerhalb der Inhaltsspalte.
   Ein Ausbruch auf die volle Fensterbreite ginge nur über 100vw, und das misst
   die Bildlaufleiste mit. Ergebnis wäre ein Querscrollbalken auf jeder Seite. */
.termine{margin:30px 0;padding:24px}
.termine .breit{padding:0;max-width:none}