/* ========================================================================== Stylesheet für net-stephan.de -------------------------------------------------------------------------- Ersetzt W3.CSS vollständig. Enthält nur die Bausteine, die auf dieser Seite tatsächlich verwendet werden (36 Klassen statt rund 240). Die Klassennamen wurden bewusst beibehalten (w3-...), damit das HTML unverändert bleiben konnte. Es besteht keinerlei Abhängigkeit mehr zu w3schools.com – das hier ist eine eigenständige Datei, die frei geändert werden kann. Aufbau: 1. Farben 2. Grundlagen 3. Layout 4. Seitenleiste 5. Navigation 6. Hilfsklassen 7. Farbklassen 8. Bildschirmgrößen ========================================================================== */ /* 1. Farben --------------------------------------------------------------- Zentral an einer Stelle. Wer die Seite umfärben will, ändert nur hier. */ :root{ --farbe-gelb: #ffeb3b; /* Seitenleiste */ --farbe-teal: #009688; /* Kontaktblock Mitte im Fuß */ --farbe-weiss: #fff; --farbe-schwarz: #000; --farbe-grau: #9e9e9e; /* Fußbereich */ --farbe-grau-hell: #f1f1f1; /* Seitenhintergrund */ --farbe-grau-dunkel: #616161; /* Kontaktblöcke außen im Fuß */ --farbe-grau-text: #757575; /* Text beim Überfahren */ --farbe-hover: #ccc; /* Schaltflächen beim Überfahren */ --farbe-linie: #eee; /* Trennlinien

*/ } /* 2. Grundlagen ----------------------------------------------------------- */ html{ box-sizing:border-box; overflow-x:hidden; } *,*:before,*:after{box-sizing:inherit} body{margin:0} html,body{ font-family:Verdana,sans-serif; font-size:15px; line-height:1.5; } h1,h2,h3,h4,h5,h6{ font-family:"Segoe UI",Arial,sans-serif; font-weight:400; margin:10px 0; } h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px} a{color:inherit;background-color:transparent} a:active,a:hover{outline-width:0} img{border-style:none;vertical-align:middle} b,strong{font-weight:bolder} hr{ box-sizing:content-box; height:0; overflow:visible; border:0; border-top:1px solid var(--farbe-linie); margin:20px 0; } /* 3. Layout --------------------------------------------------------------- */ /* Zentrierter Inhaltsbereich. Die Breite wird im überschrieben. */ .w3-content{ margin-left:auto; margin-right:auto; max-width:980px; } /* Standard-Innenabstand für Inhaltsblöcke */ .w3-container{padding:0.01em 16px} /* Umfließende Elemente einschließen (clearfix) */ .w3-container:before,.w3-container:after, .w3-row-padding:before,.w3-row-padding:after{ content:""; display:table; clear:both; } /* Hauptspalte neben der Seitenleiste – weicher Übergang beim Ein-/Ausblenden */ .w3-main{transition:margin-left .4s} /* Drittel-Spalte: auf schmalen Geräten volle Breite (siehe Abschnitt 8) */ .w3-third{float:left;width:100%} /* Spaltenraster mit Innenabstand */ .w3-row-padding, .w3-row-padding>.w3-third{padding:0 8px} /* 4. Seitenleiste und Abdunklung ------------------------------------------ */ .w3-sidebar{ height:100%; width:200px; /* wird im HTML auf 300px gesetzt */ background-color:var(--farbe-weiss); position:fixed!important; z-index:1; overflow:auto; } /* Dunkler Schleier hinter der ausgeklappten Leiste auf Mobilgeräten */ .w3-overlay{ position:fixed; display:none; width:100%; height:100%; top:0;left:0;right:0;bottom:0; background-color:rgba(0,0,0,0.5); z-index:2; } /* 5. Navigation und Schaltflächen ----------------------------------------- */ .w3-button{ border:none; display:inline-block; padding:8px 16px; vertical-align:middle; overflow:hidden; text-decoration:none; color:inherit; background-color:inherit; text-align:center; cursor:pointer; white-space:nowrap; -webkit-touch-callout:none; /* iOS: kein Kontextmenü bei langem Tippen */ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .w3-button:hover{ color:var(--farbe-schwarz)!important; background-color:var(--farbe-hover)!important; } /* Menüeinträge in der Seitenleiste: volle Breite, linksbündig */ .w3-bar-block .w3-bar-item{ width:100%; display:block; padding:8px 16px; text-align:left; border:none; white-space:normal; float:none; outline:0; } /* 6. Hilfsklassen --------------------------------------------------------- */ .w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} .w3-round{border-radius:4px} .w3-center{text-align:center!important} .w3-right{float:right!important} .w3-padding{padding:8px 16px!important} .w3-padding-large{padding:12px 24px!important} .w3-padding-24{padding-top:24px!important;padding-bottom:24px!important} .w3-margin-bottom{margin-bottom:16px!important} .w3-margin-right{margin-right:16px!important} .w3-xxlarge{font-size:36px!important} .w3-jumbo{font-size:64px!important} /* Sanftes Einblenden beim Seitenaufruf */ .w3-animate-opacity{animation:opac 0.8s} @keyframes opac{ from{opacity:0} to{opacity:1} } /* Produktkacheln auf der Startseite beim Überfahren */ .w3-hover-sepia:hover{filter:sepia(100%)} /* 7. Farbklassen ---------------------------------------------------------- */ .w3-yellow {color:var(--farbe-schwarz)!important;background-color:var(--farbe-gelb)!important} .w3-teal {color:var(--farbe-weiss)!important;background-color:var(--farbe-teal)!important} .w3-white {color:var(--farbe-schwarz)!important;background-color:var(--farbe-weiss)!important} .w3-black {color:var(--farbe-weiss)!important;background-color:var(--farbe-schwarz)!important} .w3-grey,.w3-hover-grey:hover {color:var(--farbe-schwarz)!important;background-color:var(--farbe-grau)!important} .w3-light-grey {color:var(--farbe-schwarz)!important;background-color:var(--farbe-grau-hell)!important} .w3-dark-grey {color:var(--farbe-weiss)!important;background-color:var(--farbe-grau-dunkel)!important} .w3-hover-text-grey:hover {color:var(--farbe-grau-text)!important} /* 8. Bildschirmgrößen ------------------------------------------------------ Umbruchpunkte: bis 600px = Handy 601–992px = Tablet ab 993px = Desktop */ /* Ab Tablet stehen die drei Produktspalten nebeneinander */ @media (min-width:601px){ .w3-third{width:33.33333%} } /* Nur auf dem Handy ausblenden */ @media (max-width:600px){ .w3-hide-small{display:none!important} } /* Nur auf dem Tablet ausblenden */ @media (max-width:992px) and (min-width:601px){ .w3-hide-medium{display:none!important} } /* Desktop: Seitenleiste dauerhaft sichtbar, Menüknopf ausgeblendet */ @media (min-width:993px){ .w3-hide-large{display:none!important} .w3-sidebar.w3-collapse{display:block!important} } /* Handy und Tablet: Seitenleiste eingeklappt, Inhalt über volle Breite */ @media (max-width:992px){ .w3-sidebar.w3-collapse{display:none} .w3-main{margin-left:0!important;margin-right:0!important} }