/* Gemeinsame Smartphone-Korrekturen für alle Seiten.
   Wird per <link media="(max-width: 768px)"> geladen und ist zusätzlich in
   @media (max-width:768px) gekapselt – Desktop- und Tablet-Regeln bleiben unberührt.
   Grundsatz: Überschriften, Hero, Intros, CTAs, Kacheln, Footer zentriert;
   Fließtext, Listen, FAQ-Antworten, Formularfelder linksbündig. */

@media (max-width:768px){

  /* ---------- Kein horizontales Scrollen ---------- */
  html,body{overflow-x:hidden;max-width:100%;}
  body{overflow-wrap:break-word;word-wrap:break-word;}
  img,svg,video,iframe,table{max-width:100%;}
  img{height:auto;}
  a{overflow-wrap:anywhere;}
  h1,h2,h3,h4{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
  .code-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-scroll{-webkit-overflow-scrolling:touch;}

  /* ---------- Einheitliche Seitenabstände (20px links/rechts) ---------- */
  .wrap{padding-left:20px;padding-right:20px;}
  .trust .wrap{padding:18px 20px;gap:12px 24px;}
  section{padding-top:64px;padding-bottom:64px;}
  .content-wrap,.faq-list,.related-grid,.legal-page .content{margin-left:auto;margin-right:auto;}

  /* ---------- Schriftgrößen: lange deutsche Komposita passen in den Viewport ---------- */
  h1{font-size:clamp(27px,7.6vw,34px);}
  h2{font-size:clamp(23px,6.4vw,28px);}
  .content-wrap h2{font-size:clamp(22px,6vw,26px);}

  /* ---------- Breadcrumb ---------- */
  .breadcrumb{text-align:center;padding:14px 0;line-height:1.5;}

  /* ---------- Hero Startseite ---------- */
  .hero .wrap{gap:36px;}
  .hero .wrap>div:first-child{text-align:center;}
  .hero p.lead{max-width:none;margin-left:auto;margin-right:auto;}
  .hero-micro{justify-content:center;gap:10px 20px;}
  .hero-card{padding:24px 20px;text-align:left;}
  .hero-card h3,.hero-card .sub{text-align:center;}

  /* ---------- Hero Unterseiten ---------- */
  .page-hero{padding:40px 0 48px;}
  .page-hero .wrap{gap:32px;}
  .page-hero .wrap{text-align:center;}
  .page-hero p.lead{margin-left:auto;margin-right:auto;}
  .tag{max-width:100%;}
  .urgency-card,.warning-card{padding:24px 20px;text-align:center;}
  .urgency-card .big{font-size:clamp(44px,14vw,72px);overflow-wrap:normal;-webkit-hyphens:none;hyphens:none;}

  /* ---------- Buttons / CTAs: zentriert, volle Breite bis 360px ---------- */
  .hero-ctas,.actions,.kontakt-actions{flex-direction:column;align-items:center;justify-content:center;gap:12px;}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost,
  .actions .btn-primary,.actions .btn-ghost,
  .kontakt-actions .btn-primary,.kontakt-actions .btn-ghost,
  .frist .btn-primary,.about .btn-ghost{display:block;width:100%;max-width:360px;margin-left:auto;margin-right:auto;text-align:center;}
  .hero-card .submit,.submit-btn{max-width:360px;margin-left:auto;margin-right:auto;display:block;}

  /* ---------- Abschnittsüberschriften und Intros ---------- */
  .section-head{margin-bottom:36px;text-align:center;}
  .content-wrap h2,.content-wrap h3{text-align:center;}
  .themen-group h3{text-align:center;}
  .about .wrap>div{text-align:center;}
  .about h2{text-align:center;}
  .about p{text-align:left;}
  .frist h3,.frist p{text-align:center;}
  .intro{text-align:left;}
  .legal-page h1,.legal-page h2,.legal-page h3{text-align:center;}

  /* ---------- Linksbündig lassen: Fließtext, Listen, FAQ, Formulare ---------- */
  .content-wrap p,.content-wrap ul,.content-wrap ol,.content-wrap li,
  .legal-page p,.legal-page ul,.legal-page ol,.legal-page li,
  .faq-item p,.field,.field label,.hero-card label{text-align:left;}
  .faq-item summary h3{text-align:left;}
  .info-box,.warn-box{padding:18px 18px;}

  /* ---------- Ablauf-Schritte auf Unterseiten ---------- */
  .step-item{gap:16px;padding:22px 0;}
  .step-item h4,.step-item p{text-align:left;}

  /* ---------- Themen-Kacheln / Ratgeber-Karten ---------- */
  .topic-grid,.article-grid,.reviews-grid,.compare-grid{grid-template-columns:1fr;gap:16px;}
  .prob,.article-card{padding:24px 20px;text-align:center;}
  .prob a.more,.article-card .more{justify-content:center;}
  .article-card{align-items:center;}
  .related-item{padding:18px 20px;text-align:left;}
  .compare-card,.info-card{padding:22px 20px;}

  /* ---------- Bewertungen ---------- */
  .review-card{padding:24px 20px;text-align:center;}
  .review-head{justify-content:center;}
  .review-head>div{text-align:left;}

  /* ---------- Kontakt-Box / Kontaktseite ---------- */
  .kontakt .wrap{text-align:center;}
  .kontakt-main{padding:40px 0 64px;}
  .kontakt-info{text-align:center;}
  .kontakt-info .lead{margin-left:auto;margin-right:auto;}
  .contact-method{text-align:left;}
  .privacy-note{text-align:center;}
  .form-card{padding:24px 20px;}
  .form-card h2,.form-card .sub{text-align:center;}

  /* ---------- Beispielrechnungen ---------- */
  .calc{padding:18px 16px;}
  .calc h3{text-align:left;}
  .calc td:last-child{padding-left:10px;}

  /* ---------- Footer: Spalten untereinander, zentriert ---------- */
  footer{padding:52px 0 96px;}
  .foot-grid{grid-template-columns:1fr;gap:28px;text-align:center;padding-bottom:32px;}
  .foot-grid p{margin-left:auto;margin-right:auto;}
  .foot-grid .brand{display:inline-block;}
  .foot-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}

  /* ---------- Floating-Call-Button: überdeckt keine Inhalte ---------- */
  .fab-call{right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:56px;height:56px;}
}